Splitting a div and positioning an inner div
There are 2 more ways to do this using css without the calculation. They are:


css positioning

Make the position of parent relative and child absolute. Now, using the slots value, left and right properties can be easily calculated for child div which will place it properly. The entire logic is reduces to the following without adding any additional elements:


const DivColoring = props =&gt; {
  let parentDivWidth = props.parentDivWidth;
  let totalSlots = props.totalSlots;
  let startSlot = props.startSlot;
  let endSlot = props.endSlot;
  return (
    &lt;div style={{ ...parentDivStyle, width: parentDivWidth + "px" }}&gt;
      &lt;div
        style={{
          ...childDivStyle,
          position: "absolute",
          left: `${((startSlot - 1) * 100) / totalSlots}%`,
          right: `${((totalSlots - endSlot) * 100) / totalSlots}%`
        }}
      /&gt;
    &lt;/div&gt;
  );
};


The entire code can be found here: https://stackblitz.com/edit/react-qj3xsp


css flex

The DivColoring component can contain 3 child divs instead of one and you can use flex property to define relative width of the divs. The relative width can be easily calculated using totalSlots, startSlot and endSlot. The basic logic can be written as:


const DivColoring = props =&gt; {
  let totalSlots = props.totalSlots;
  let startSlot = props.startSlot;
  let endSlot = props.endSlot;
  let div3 = totalSlots - endSlot;
  let div2 = endSlot - startSlot + 1;
  let div1 = startSlot - 1;
  return (
    &lt;div style={{ ...parentDivStyle, width: props.parentDivWidth + "px" }}&gt;
      &lt;div id="" style={{ flex: div1 }} /&gt;
      &lt;div id="" style={{ ...childDivStyle, flex: div2 }} /&gt;
      &lt;div id="" style={{ flex: div3 }} /&gt;
    &lt;/div&gt;
  );
};


The complete code can be found here: https://stackblitz.com/edit/react-4mgl4c.
You also need to apply some extra css. Pros are calculation is reduced but con is that DOM will become heavy. Instead of 1, now there are 3 divs for each block.

The recommended approach will be using css positioning.

Hope it helps. Revert for any doubts/clarifications.