JSFiddle - React, Tailwind, and code Playground

by GeekStocks

HTML

<body>
        <div id="header">
            Header
        </div>
        <div>
            <div id="lPane" class="dragArea">Left</div>
            <div id="mPane">Middle</div>
            <div id="rPane" class="dragArea">Right</div>
        </div>
    </body>

CSS

html, body {
    width: 100%; height: 100%; padding: 0px; border: 5px solid blue; margin: 0px; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

div {position: relative;}
#header {background-color: red;}
.dragArea {float: left; width: 50px; height: 50px; background-color: green;}
#rPane {float: right;}
#mPane {float: left; width: 100%; background-color: orange;}