JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="left">
        <div class="leftContainer">left</div>
    </div>
    <div class="right">
        <div class="rightContainer">right</div>
    </div>
</div>
<div class="header">header</div>
<div class="footer">footer</div>

CSS

body, html {
    height: 100%;
    margin: 0;
}
.header {
    height: 50px;
    width: 100%;
    background: #021456;
    position: absolute;
    top: 0;
    left: 0;
}
.footer {
    height: 50px;
    width: 100%;
    background:green;
    position: absolute;
    bottom: 0;
    left: 0;
}
.content {
    margin: 0 auto;
    width:400px;
    height:100%;
}
.left, .right {
    height:100%;
}
.left {
    float:left;
    background:#ef4578;
}
.right {
    background:#425633;
}
.leftContainer, .rightContainer {
    padding: 50px 0;
}