JSFiddle - React, Tailwind, and code Playground

by sandwichest

HTML

<div id="nav">
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
    <a href="">Nav Item</a>
</div>
<div id="header">header</div>
<div id="content">content will always be the same height as the nav now.</div>

CSS

body,html {padding:0;margin:0;}

#nav { position:absolute;left:0px;top:0px;width:100px; background:#c0c0c0; }

#nav a {display:block;}

#header { padding-left:120px; height: 100px;background: #252525; font-size:2em; color:#c0c0c0; }

#content { padding-left:120px;width: 100%; height: 300px; background: #f0f0f0;}

JavaScript

$(function() {
    var headerHeight = $('#header').height();
    var navHeight = $('#nav').height();
    var contentHeight = navHeight - headerHeight;
    $('#content').css('minHeight',contentHeight);
})