JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <header>HEADER</header>
    <section id="main">
        <section id="sidebar">SIDEBAR</section>
        <section id="content">CONTENT AREA</section>
    </section>
    <footer>FOOTER</footer>
</div>

CSS

*
{
    color: #FFF;
    font-family: Arial;
    text-align: center;
}

#container
{
    border: 1px solid #000;
    display: table;
    height: 300px;
    width: 100%;
}

#container > header, #container > section, #container > footer
{
    display: table-row;
}

header
{
    background-color: #900;
    height: 100px;
}

#sidebar
{
    background-color: #333;
    display: table-cell;
    width: 150px;
}

#content
{
    background-color: #999;
    display: table-cell;
}

footer
{
    background-color: #009;
    height: 100px;
}