JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
      <div id="debug"></div>
      <div id="f0">
      <div id="d0">
      <div id="c0">
      <div id="d1">
      <div id="c1">
      <table height="100%" cellpadding=0 cellspacing=0>
      <tr><td id="td" align="Left">
      <div id="d2">
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum... Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
            Lorem ipsum...
      </div>
      </td></tr>
      </table>
      </div>
      </div>
      </div>
      </div>
      </div>
   </body>

CSS

html, body {
            margin: 0;
            overflow: hidden;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        
        #f0 {
            bottom: 2em;
            left: 2em;
            position: absolute;
            right: 2em;
            top: 2em;
        }
        
        #d0 {
            height: 100%;
        }
        
        #c0 {
            height: 100%;
            position: relative;
            width: 50%;
        }
        
        #d1 {
            height: 100%;
            position: absolute;
            right: 0;
        }

        #c1 {
            height: 100%;
            overflow: auto;
            position: relative;
            left: 50%;
        }
        
        #td {
        }
        
        #d2 {
            background: yellow;
        }

        #d3 {
            background: blue;
        }
        
        #d4 {
            display: inline-block;
            width: 50%;
        }