JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div id="mainContainer">
        <div id="headerContainer">
            headerContainer
        </div>
        <div id="middleContainer">
            <div id="leftSection">
                leftSection
            </div>
            <div id="middleSection">
                middleSection
            </div>
            <div id="rightSection">
                rightSection
            </div>
        </div>
        <div id="footerContainer">
            footerContainer
        </div>
    </div>
</body>
</html>

CSS

body { margin:0; }
    #mainContainer
    { 
        position: absolute; 
        right: 4%; left: 4%; 
        height: 100%; 
    }
    #headerContainer
    { 
        width: 100%; 
        z-index: 10; 
        position: relative; 
        background: #323232; 
        color: white; 
        height: 30px;
    }
    #middleContainer { height: 100%; }
    #leftSection
    {
        position: absolute; 
        float: left; 
        width: 175px; 
        background: #71ABD1; 
        height: 100%; 
        overflow: auto; 
        color: black; 
        padding-top: 30px;
    }
    #middleSection
    { 
        position: absolute; 
        height: 100%; 
        background-color: yellow; 
        left: 175px; 
        right: 175px; 
        color: black; 
        padding-top: 30px; 
    }
    #rightSection
    {
        float: right; 
        height: 100%; 
        width: 175px; 
        border-left: 1px dotted black; 
        background: red; 
        color: black; 
        padding-top: 30px; 
    }
    #footerContainer 
    {  
        position: relative; 
        bottom: 0; width: 100%; 
        height: 30px; 
        background: #323232; 
        color: white;
    }