JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="menu-container">
<ul class="menu" id="sidemenu">
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
<li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
</ul>
</div>
<div class="content-container">
<div class="header">
<div class="row">
<div class="col-sm-6">
left header
</div>
<div class="col-sm-6 text-right">
right header
</div>
</div>
</div>
<div class="page-content">
<div class="row">
<div class="col-sm-12">
this is a row #1
</div>
</div>
<div class="row">
<div class="col-sm-12">
this is a row #2
</div>
</div>
</div>
</div>
</div>
CSS
.menu-container {
width: 120px;
float: left;
display: block;
padding: 15px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.content-container {
width: 100%;
padding-left: 120px;
}
.content-container .header {
padding: 15px 20px;
height: 60px;
}
.content-container .page-content {
padding: 50px;
}