JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav-container">
    <ul class="nav">
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
    </ul>
	<ul class="nav">
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
        <li>Some list item</li>
    </ul>
</div>
<div id="content">
    <h2>A page title</h2>
    <p>Some text and stuff</p>
</div>

CSS

#nav-container {
    float: left;
    display: table;
}
.nav {
    float: left;
    min-width: 125px;
    overflow-y: auto;
    height: calc(100vh - 40px);
}
.nav { background: none #EEF; }
.nav + .nav { background: none #CCE; }

#content {
    float: left;
    margin-left: 15px;
}