JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pageContainer">
        <div id="contentContainer">
            <div id="leftContainer">            
                <div id="leftContent">
                    <div id="leftNavContent">
                    
                    </div>
                </div>                
            </div>
            <div id="rightContainer">World</div>
        </div>
    </div>

CSS

body {margin: 0; padding: 0; text-align: center;  color: #000; background: #FFF; display:block;}
#pageContainer{margin:auto; padding:auto; width:100%;overflow:hidden;}
#contentContainer {margin: 5%; width: 90%; height:100%; padding: 0; overflow:hidden; text-align: left;}
#leftContainer {float:left; width:80%; margin:0px; padding:0px; position:relative; background-color:Gray;}
#leftContent {float:right; position:relative; top:0px; margin: 5% 0 0 5%; width:90%; height:85%;}
#leftNavContent {float:right; position:relative; top:50px; margin: 5% 0 0 5%; width:90%; height: 90%;}
#rightContainer {float:right ;width:20%; margin:0px;padding:0px;position:relative; background-color:Lime;}