JSFiddle - React, Tailwind, and code Playground

by 8indaas

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-xs-4 sidebar-outer">
        <div class="sidebar">Project list</div>
    </div>
    <div class="col-xs-8">
        <div class="content">Project Details
             <h1>Project 1</h1>
            <h1>Project 2</h1>
            <h1>Project 3</h1>
            <h1>Project 4</h1>
            <h1>Project 5</h1>
            <h1>Project 6</h1>
            <h1>Project 7</h1>
             <h1>Project 8</h1>
             <h1>Project 9</h1>
             <h1>Project 10</h1>
             <h1>Project 11</h1>
             <h1>Project 12</h1>
             <h1>Project 13</h1>
        </div>
    </div>
</div>

CSS

.row {
    margin-top:10px;
}

.sidebar-outer {
    position: relative;
}
.sidebar {
    background-color: red;
    position: fixed;
}
.content {
    background-color: lightblue;
}

@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}