JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="top">top</div>
  <div class="content">
    <div class="left">
      <div class="owerflow">
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
      </div>
    </div>
    <div class="right">
      <div class="owerflow">
        right
      </div>
    </div>
  </div>
</div>

CSS

html,body{margin:0;padding:0;height:100%;overflow:hidden;}
.main{
  display:flex;
  flex-direction:column;
  height:100%;
  box-sizing:border-box;
}
.top{
  width:100%;
}
.content{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  flex:1;
}
.left{
  width:200px;
  height:100%;
  border:1px solid #bbb;
  position:relative;
  box-sizing:border-box;
}
.right{
  flex:1;
  height:100%;
  border:1px solid #bbb;
  position:relative;
  box-sizing:border-box;
}
.owerflow{
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  box-sizing:border-box;
  overflow:auto;
}