JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<header> Header </header>
<div id="content">
    <section id="left">
        Left
    </section>
    <section id="center">
        <p>Center<p>Center<p>Center
    </section>
    <section id="right">
        Right
    </section>
</div>
<footer> Footer </footer>
            </div>

CSS

html, body { height: 100%; margin: 0; padding: 0; }
#wrapper { width: 500px; margin: 0 auto; font-size: 9px; height: 100%; }
header, footer { background: red; height: 50px; }
#content { height: 100%; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 50px 0; margin: -50px 0; }
section { float: left; overflow: auto; height: 100%; }
#left, #right { background: blue; width: 100px; }
#center { background: green; width: 300px; }