JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexcontainer">
  <div class="longtext">
    section 1 with long name section 1 with long name section 1 with long name 
  </div>
  <div class="allspace">
    all space
  </div>
</div>

CSS

body, html {
    height: 99%;
    
    padding:0;
    margin:0;
}
.flexcontainer{
  width:25%;
  display:flex;
  flex-direction: column;
  height:100%;
  border: 1px solid lime;
}
.allspace{
  flex-grow:1;
  min-height: 300px;
  background-color: yellow;
}
.longtext{
  background-color: red;
  
}
.textcontainer{
  border:1px solid magenta;
  /*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}