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;
}
JavaScript
var navs = document.getElementsByClassName('nav');
[].forEach.call(navs, function(el){
el.style.width = "125px"; // or whatever...
setTimeout(0, function(){el.style.width = "auto";});
});