JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bodyWrapper">    
    <div id="header">header</div>
    
    <div class="column-container">
        <div class="left">
          <p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p>
          <p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p>
          <p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p>
          <p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p><p>LEFT</p>
        </div>

        <div class="right">
            <p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p>
            <p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p>
            <p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p>
            <p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p><p>RIGHT</p>
        </div>
    </div>
    
    <div id="footer">footer</div>  
</div>

CSS

*{
    margin:0px;
    padding:0px;  
}
html, body {
    padding:0px;
    margin:0px;
    font-family:verdana;
    font-size:11px;
    color:#646464;
    height:100%;  
}
#header, #footer{
    position:absolute;
    width:100%;
    height:50px;
    background-color:#000;
}
#header{
    top:0px;
}
.bodyWrapper{
    height:100%; 
    position:relative;
}
.column-container {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
}
#footer{
    bottom:0px
}
.left, .right{
    width:calc(50% - 2px);  
    height:100%;
    float:none;
    clear:none;
    display:inline-block;
    overflow-x:scroll;
    overflow-y:hidden;
}

JavaScript

function setHeight(){
    var domH = $(window).height();
    var header = $("#header").height();
    var footer = $("#footer").height();
    var height = domH - (header + footer);
    var styles = {
        "overflow": "auto",
        "height": height,
        "margin-top": header,
    }
    $(".left, .right").css(styles);
}
setHeight();
$(window).resize(function() {
    setHeight();
});