JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
   <div class="item one">
     <div class="title">title one</div>
     <div class="remaining">remaining one</div>
   </div>
   
   </div>
</div>

SCSS

.wrapper {
  height:100vh;
  width:300px;
  background:blue;
  color: blue;
}
.wrapper > div {
  display: flex;
  flex-direction: column;
}
.one {
  height:100%;
  background: blue;
}
.two {
  height:100%;
  background:yellow;
}
.three {
  height:30%;
  background:red;
}
.title {
  height:30px;
  background:black;
}
.remaining {
  background:green;
  flex: 1;
}