JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">header text</div>
    <div id="leftColumn">
    </div>
    <div id="rightColumn"></div>
    <div id="footer">footer text</div>
</div>

CSS

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#leftColumn,
#rightColumn {min-height:100%; float:left; width:50%;}
#leftColumn {background-color:blue;}
#rightColumn {background-color:yellow;}
#header {margin-top:-50px; height:50px; background-color:red;}
#footer {clear:both; margin-bottom:-50px; height:50px; background-color:red;}