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>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0-beta.2/themes/smoothness/jquery-ui.css">
<div class='container-fluid'>
<div id="firstDiv" class="col-sm-6">
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla bla <br>
bla bla <br>
bla bla <br>
bla bla bla <br>
</div>
<div id="secondDiv" class="col-sm-6">
<div class="form-group">
<label>Field 1</label>
<input type="text" >
</div>
<div class="form-group">
<label>Field 2</label>
<input type="text" >
</div>
<div id="motherDiv" class="form-group">
<label>Field n</label>
<input type="text" >
</div>
<div class="form-group">
<label>Field n</label>
<input type="text" >
</div>
<div class="form-group">
<label>Field n</label>
...
JavaScript
$(document).ready(function () {
$('#calendar').datepicker();
$(window).scroll(function () {
if ($(window).width() > 480)
{
//$('#ui-datepicker-div').css('position','fixed');
$('#secondDiv').css('top', $(this).scrollTop());
}
});
});