JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="DataRow" class="col-md-12">
<div class="panel panel-info">
<div class="panel-heading">
<div class="col-md-2">
<h3 class="panel-title">
<a class="btn btn-warning btn-xs" data-toggle="collapse" data-parent="#DataRow" href="#CollapseData" aria-expanded="true" aria-controls="CollapseData">
<span class="glyphicon glyphicon-collapse-down"></span>
</a>
Data</h3>
</div>
<div class="col-md-10">
<button class="btn btn-danger btn-xs disabled" id="DownloadBtn" type="button" title="Download all data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download</button>
</div>
</div>
<div id="CollapseData" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="form-inline col-sm-12 move-down-sm">
Controls will be displayed here
</div>
...