JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<div id="bodyWrap" style="overflow:none">
<div id="searchFilters" style="width:100%;">
<div class="row">
<div class="column" style="width:19%">
<span class="filter-header">Select 1</span>
<select id="select1" class="chosen-select" multiple>
<option value="28">Option 1</option>
<option value="90">Option 2</option>
</select>
</div>
</div>
<div class="row">
<div class="column" style="width:16%">
<span class="filter-header">Select 2</span>
<select id="select2">
<option value="28">Option 1</option>
<option value="90">Option 2</option>
<option value="95">Option 3</option>
</select>
</div>
</div>
</div>
</div>
CSS
body {
font:12px 'Verdana';
}
#bodyWrap {
overflow:hidden;
border:1px solid black;
}
#searchFilters tr tr{
padding-bottom: 1em;
}
#searchFilters {
border:0px solid black;
}
#searchFilters .row {
border:0px solid red;
margin-top:10px;
overflow:none;
}
#searchFilters .column {
border:0px solid blue;
padding:0px;
background-color:#0099CC;
}
#searchFilters .filter-header {
border:0px solid black;
display: inline-block;
font-weight: bold;
padding-left:10px;
vertical-align: middle;
color: black;
margin:5px 0px 3px 0px;
}
#searchFilters .column select {
width:100%;
margin:0px;
}
JavaScript
$(function() {
$("#bodyWrap").css("overflow", "none");
$("#select1").chosen({});
$("#select2").chosen({});
});