JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="nav" class="navbar"></div>
<div id="content" class="container">
    <div class="row">
        <div class="col-sm-7 col-md-7 main"></div>
        <div class="col-sm-5 col-md-5">
            <div class="sidebar-fixed" data-spy="affix" data-offset-top="60" data-offset-bottom="50" id="sidebar"></div>
        </div>
    </div>
</div>
<footer class="container"></footer>

CSS

body {
    position: relative;
}
.navbar {
    height: 60px;
    background-color: #dce7ed;
}
.main {
    background-color: #9fc8e3;
    height: 3900px;
    margin-top: 60px;
}
#sidebar {
    background-color: #d5cbc6;
    height: 400px; width: 283px;
    margin-top: 60px;
}
#sidebar.affix-top {
    position: static;
}
#sidebar.affix {
    position: fixed;
    top: 20px;
    width: 283px;
}
#sidebar.affix-bottom {
    position: absolute;
    /* bottom: 50px; */
    top: auto;
    bottom: 50px;
}
footer {
    height: 50px;
    background-color: #dce7ed;
}