JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-wrap">
		<div class="header">
			<div class="logo"><h4>Header</h4></div>
		</div>
	</div>
	<div class="content-wrap">
		<div class="side-bar">
			Sidebar
		</div>
		<div class="content-top">
			<div class="top">Content-Top</div>
		</div>
		<div class="content">
			<br />
			<div style="width: 95%; margin: 0 auto;">
				Content
			</div>
		</div>
	</div>

CSS

* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	background: #d4d4d4; 
	font-family: "helvetica neue", Tahoma, Sans;
}
::-webkit-scrollbar {  
	width: 12px;  
}  
::-webkit-scrollbar-track {  
	background-color: #cecece;  
	border-left: 1px solid #ccc;  
}  
::-webkit-scrollbar-thumb {  
	background-color: #c0c0c0;  
	border-radius: 6px;
}  
::-webkit-scrollbar-thumb:hover {  
	background-color: #aaa;  
} 
.header-wrap {
	width: 100%;
	height: 30px;
}
.header {
	width: 100%;
	height: 29px;
	background: #c0c0c0;
	background: -webkit-linear-gradient(bottom, #cacaca,#eaeaea); /* For Safari */
	background: -o-linear-gradient(bottom, #cacaca, #eaeaea); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom, #cacaca, #eaeaea); /* For Firefox 3.6 to 15 */
	background: linear-gradient(bottom, #cacaca, #eaeaea); /* Standard syntax */
	border-bottom: 1px solid #a0a0a0;
	top: 0;
}
.content-wrap {
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	height: 100%;
	width: 100%;
	height: -moz-calc(100% - 31px);
	height: -webkit-calc(100% - 31px);
	height: calc(100% - 31px); 
}
.side-bar {
	overflow-y: scroll;
	width: 280px;
	min-width: 280px;
	border-right: 1px solid #a0a0a0;
	height: 100%;
	padding: 0 10px;
	float: left;
}
.content-top {
	margin-left: 300px;
	margin-right: 0;
}
.top {
	width: 100%;
	height: 98px;
	border-bottom: 2px groove #fff;
}
.content {
	overflow-y: scroll;
	height: 100%;
	height: -moz-calc(100% - 100px);
	height: -webkit-calc(100% - 100px);
	height: calc(100% - 100px); 
	margin-top: 0;
	margin-left: 300px;
	margin-right: 0;
	margin-bottom: 0;
}