JSFiddle - React, Tailwind, and code Playground

HTML

<div id='site'>
<div id='pane'>
  <div id='editor'>
  <div id='content-scroll'>
    <div id='content'>
    
    </div>
    </div>
  </div>
</div>
</div>

CSS

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

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;
  grid-template-rows: 10em 1fr 10em;
  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
}

#editor {
  display: relative;
  overflow: scroll;
}
#content-scroll {
   height: 40vh;
   overflow: scroll;
}
#content {
   height: 2000px;
}