JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">

</div>

<div id="container">
  <div class="col" id="col1">
      content<br/>
      content<br/>
  </div>
  <div class="col" id="col2">
      content<br/>
      content<br/>
      content<br/>
      content<br/>
      content<br/>
      content<br/>
      content<br/>
  </div>
  <div class="col" id="col3">
      content<br/>
      content<br/>
      content<br/>
      content<br/>
  </div>
  <div style="clear:left;"></div>
</div>

<div id="footer">
  
</div>

CSS

body, html{
  height:100%;  
}

#header{
  height:100px;
  width:100%;
}

#footer{
  height:100px;
  width:100%;
}
#container { 
    display: table; 
    width: 100%;
    }
    
.col{
   height:100%;
   display: table-cell;
 }
 
 #col1{
    width:15%;  
    background: #fa0;
 }
 
  #col2{
    width:60%;
    background: #0fa;
 }
 
  #col3{
    width:15%;  
    background: #a0f;
 }
}