JSFiddle - React, Tailwind, and code Playground

HTML

<div id="masterContainer">
  <div id="header">
    header
  </div>
    
   <div id="content">
    
    <div id="subContainer">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>
   
   </div>
   
</div>

CSS

#masterContainer {
  
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
}

#header {
  
  background: yellow;
}

#content {
  
  background: grey;
  flex: 1 0 auto;
}

#subContainer {
  
  display: flex;
  width: 100%;
  height: 100%;
}

#left {
  
  background: red;
  width: 50;
}

#right {
  
  background: green;
  flex: 1;
}