JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="page-container">
    <div class="page-wrapper">
        <div class="sidebar collapse in width">
            <div class="sidebar-content">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">Overview</a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Analytics</a></li>
                    <li><a href="#">Export</a></li>
                </ul>
            </div>
        </div>
        <div class="content-wrapper">
            Content goes here.
            <br/>
            <a href="javascript:;" data-toggle="collapse" class="btn btn-default" data-target=".sidebar">Toggle Sidebar</a>
        </div>
    </div>
</div>

CSS

.page-container,
.sidebar,
.content-wrapper {
    position: relative;
}
.sidebar {
    background-color: #efefef;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.content-wrapper {
    background-color: #fff;
    padding: 10px;
}
@media (min-width: 769px) {
	.page-container {
		display: table;
		width: 100%;
		table-layout: fixed;
	}
	.page-wrapper {
		display: table-row;
	}
	.content-wrapper,
	.sidebar,
	.sidebar.collapse.in {
		display: table-cell;
		vertical-align: top;
	}
	.sidebar, .sidebar-content, .sidebar.collapse.in {
		width: 260px;
	}
}