JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">
    <div id="d2">
    </div>

    <div id="d3">
        <div id="d4">&bnsp;</div>
        <div id="d5">&nbsp;</div>
    </div>
</div>

CSS

#d1 {
  width: 990px;
  border: 1px solid black;
  background-color: pink;
    padding: 3px; /*to see #d1*/
  display: table;
    height: 10000px; /*huge height to see effect*/
}

#d2 {
  display: table-cell;
  width: 300px;
  background-color: yellow;
}

#d3 {
  display: table-cell;
  width: 690px;
    
}

#d4 {
  background-color: blue;
  width: 690px;
  height: 300px;
}

#d5 {
  background-color: brown;
  width: 690px;
  height: 100%;
}