JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">IECC BACK OFFICE
<br><br><br><br>&nbsp;
       Main PAGE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IECC Device Entry&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IECC Boss Configuration
</div>
<div id="panes">
    <div id="left"><br><br><br><br>&nbsp;
        IECC Device Tree Pane 
    </div>
    <div id="right-top"><br><br><br><br>&nbsp;
        IECC Device Information Pane 
    </div>
    <div id="right-bottom"><br><br><br><br>&nbsp;
        IECC Data Pane
    </div>
</div>

CSS

body { height: 100%; }

#header {
    height:100px;   
    background: #2748b2;
}

#panes { position: absolute; top: 100px; bottom: 0; width: 100%; }

#left {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 30%;   
    background: blue;
}

#right-top {
    position: absolute;
    right: 0;
    width: 70%;
    height:50%;
    overflow: auto;
    background: green;
}

#right-bottom {
    position: absolute;
    right: 0;
    width: 70%;
    bottom: 1px;
    height:50%;   
    background: yellow;
}