This time, the html is more interesting than the css. (Make sure to change the javascript comments to html comments)
<body>
// script is tied to id=second1 inside the js
<script src="side-by-side.js"></script>
<div id="header">Same Page with a Responsive Design</div>
<div class="container">
<div class="row"> <!-- One row, 3 columns -->
<div class="col-sm-6">
<h3>Column 1</h3>
<div> //end class col-sm-6
<div class="col-sm-4" id="first-responsive">
<h3>Column 2</h3>
</div> //end class col-sm-4
<div class="col-sm-2" id="second1">
<h3>Column 3</h3>
</div>//end class col-sm-2
</div> //end class row
</div> //end class container
</body>
This css relies on bootstrap, so to make it work we need a header
At a minimum, we need:
<link rel="stylesheet" href="../bootstrap.min.css">
and there is some minor style to define the three id's, header, first-responsive, and second1.
These are only slightly different from the ones shown in Side by Side using only divs.
Just put a few words in here so that we are absolutely sure that this area is independent of the green area.