JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
  A
</div>
<div class="bottom">
  C
</div>
<div class="right">
  D
</div>
<div class="center">
  E
</div>

SCSS

$toolbar-height: 75px;
$sidebar-width: 50px;

* { box-sizing: border-box }

html{ 

    &, body {
      
        /* context for the absolute-positioned children */
        position: relative; 
        
        /* ensuring full display size is utilized */
        width: 100%;
        height: 100%;
        
        margin: 0;
        
    }

    body {
         
        & > div {
            position: absolute;
            border: thin solid red; /* demo */
            padding: 5px; /* border-box is necessary to make this work */
        }

        .top, .bottom {
            width: 100%;
            height: $toolbar-height;
        }

        .right {
            top: $toolbar-height;
            width: $sidebar-width;
            height: calc(100% - #{$toolbar-height} * 2 );
        }

        .bottom {
            bottom: 0;
        }

        .right {
            right: 0;
        }

        .center {

            position: absolute;
            top: $toolbar-height;
            
            width: calc(100% - #{$sidebar-width} * 2 );
            height: calc(100% - #{$toolbar-height} * 2 );

        }

    }

}