JSFiddle - React, Tailwind, and code Playground

HTML

<header>Head</header>
<nav id="main_nav">
    <ul>
        <li><a href="/">Home</a>
        </li>
        <li><a href="/contact">Contact (p)</a>
        </li>
        <li><a href="/temp">Temp</a>
        </li>
    </ul>
</nav>
<div id="content">
     <h1>Test</h1>

     <h2>A</h2>
    <h2>C</h2>
    <h2>D</h2>

</div>
<footer>
    <p>[Copyright bumf]</p>
</footer>

CSS

nav {
    display:table-cell;
    padding-right: 5px;
    margin-right: 5px;
    background: yellow;
    width: auto;
}
#content {
    margin: 5px 5px 0;
    padding-left: 5px;
    display:table-cell;
    background:#ddd;
    width: auto;
}
header {
    background: blue;
}
footer {
    clear: both;
    background: #ccc;
}
footer p{margin:0}