JSFiddle - React, Tailwind, and code Playground

HTML

<body                               style="z-index: 1; background-color: purple;">
    <div class="contents"             style="z-index: 2; background-color: black;">
        <div class="resizableArea"    style="z-index: 3; background-color: aqua;">
            <div class="leftSection"  style="z-index: 4; background-color: yellow;">&nbsp;</div>
            <div class="splitter"     style="z-index: 7; background-color: green;">&nbsp;</div>
            <div class="rightSection" style="z-index: 6; background-color: red;">&nbsp;<br />
                <div id="drag"        style="z-index: 8; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>
            </div>
        </div>
    </div>
  </body>

CSS

.contents
        {position:fixed; bottom:0; left: 0; right:0; top:100px;}

        .resizableArea
        {position:absolute; bottom:0; top:0; width:100%;}

        .resizableArea .leftSection
        {position:relative; float:left; width: 150px; height:100%;}

        .resizableArea .splitter
        {position: absolute; left: 150px; width: 4px; height: 100%;}

        .resizableArea .rightSection
        {position: relative; overflow: auto; height: 100%;}

JavaScript

$("#drag").draggable();