JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-1">
  <div class="child-1"></div>
  <div class="child-2">
    <div class="test-container">
    
    </div>
  </div>
</div>

CSS

.flex-1 {
  display: flex;
  flex-direction: column;
  height:500px;
  background: red;
}
.child-1{
  height:50px;
  background: blue;
}
.child-2{
  flex-grow:1;
  /* flex:1; */
  background: green;
}
.test-container {
  display: flex;
  flex-direction: row;
  background: white;
  height:100%;
}