JSFiddle - React, Tailwind, and code Playground

HTML

<div id="layout">
    <div id="header">
        Header (100% x 100px)
    </div>
    <div id="main">
        <div id="right">
            <div id="content">
                Fill<br>Fill<br>Fill<br>Fill<br>
                Fill<br>Fill<br>Fill<br>Fill<br>
              
            </div>
            <div id="right-sidebar">
                Sidebar (30% x 100%)
            </div>
        </div>
        <div id="left-sidebar">
            Sidebar (200px x 100%)
        </div>
    </div>
</div>

CSS

#layout, #header, #main, #left-sidebar, #right, #right-sidebar, #content {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
}

#layout        { background: #abc; top: 0; right: 0; bottom: 0; left: 0; }
#header        { background: #bcd; top: 0; right: 0; height: 100px; left: 0; }
#main          {                   top: 100px; right: 0; bottom: 0; left: 0; }
#left-sidebar  { background: #def; top: 0; width: 200px; bottom: 0; left: 0; }
#right         {                   top: 0; right: 0; bottom: 0; left: 200px; }
#right-sidebar { background: #edc; top: 0; right: 0; bottom: 0; left: 70%; }
#content       { background: #dcb; top: 0; width: 70%; bottom: 0; left: 0; }

#content, #right-sidebar, #left-sidebar { overflow: auto; }