JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen-sprite.png"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/[email protected]"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="bodyMainContentHolder" style="min-height: 150px; border: 1px solid blue;">
<div class="sectionfp group visOverflow">
<div class="col span_1_of_3_cust span_pad_right">
<div class="smallPadTop brClear setLeft">
<div class="setBold brClear">Select Language:</div>
<div class="chosenDDLHolder">
<select class="chosen-select setProvDDStyle">
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
<option>TEST 1</option>
</select>
</div>
</div>
</div>
</div>
</div>
CSS
.chosenDDLHolder {
width: 100%;
}
.setBold {
font-weight: bold;
}
.setLeft {
text-align: left;
}
.brClear {
clear: both;
}
.smallPadTop {
padding: 15px 0 0 0;
}
/* COLUMN SETUP */
.col {
display: block;
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3_cust {
width: 28.2%;
}
.span_pad_right {
padding-right: 1%;
}
.bodyMainContentHolder {
width: 98%;
margin: 0 auto;
padding: 2% 0 2% 0;
}
.sectionfp {
clear: both;
padding: 0px;
margin: 0px;
height: auto;
width: 100%;
}
/* GROUPING */
.group:before, .group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 */
}
.visOverflow {
overflow: visible;
}
JavaScript
$(".chosen-select").chosen();