JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrapper">
	<div id="left">
		<p>left nav</p>
	</div>
	<div class="main">
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
		<p>asdfasdf</p>
	</div>
</div>

</body>

CSS

html, body { height: 100%;}
	#left, .main, #wrapper { height: 100%;}
	.wrapper { display: table;position: relative;  }	
	#left { position: relative;background: yellow;width: 100px;display: table-cell;} 
	.main { position: relative;background: yellowgreen;width: 500px;display: table-cell;}
.wrapper { display: block;position: relative;}