JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pageContainer">
  <div id="contentContainer">
    <div id="leftContainer"> Am the left container
       <div id="left1">
           <div id="left2">left2
          </div>
      </div>
    </div>
    <div id="rightContainer">
    </div>
  </div>
</div>

CSS

html, body {margin: 0px; padding: 0px;}

#pageContainer{ margin: auto; padding: auto;}
#contentContainer{ margin:150px; width:1100px; height: 100%; overflow: hidden; }
#leftContainer{ width: 80%; min-height: 800px; background: #009900; float:left;}
#left1{position: relative; margin:80px 0 0 80px; height: 550px; top:0px; background: #000000;}
#left2{position: relative; margin:80px 0 0 80px; height: 500px; top:110px; background:#99FFFF; }
#rightContainer{ width: 20%; height: inherit; background: black; float:right;}

/ CSS Document */