JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div class="header">
         <h4>This is header</h4>
    </div>
  <div class="row">
  	    <div class="content">
            <div class="left">Left Col</div>
            <div class="middle">Middle Col<br  />
                Middle Col<br  />
                Middle Col<br  />
                Middle Col<br  />
                Middle Col<br  />
            </div>
  		    <div class="right">Right Col</div>
  	    </div>
    </div>
    <div class="footer">
        <h4>This is footer</h4>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}

  .row  {
        display: table-row;
        width:100%;
        height: 100%;
        
    }

.header, .footer{
    background: pink;
    display:table-row;
    text-align: center;
    vertical-align: middle;
}

 .content {
        display: table;
        background: brown;
        width:100%;
        height: 100%;
        overflow: auto;
    }
.left, .right{
    background: green;
    display: table-cell;
    width:10%;
    vertical-align: middle;
}
.middle{
    background: brown;
    display: table-cell;
    vertical-align: middle;
}