JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="view-source:https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css">
<div class="modal fade in" id="hostels_list_dialog_filter" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" style="display: block; padding-right: 15px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel"> Filter Setup</h3>
</div>
<div class="modal-body">
<form role="form">
<!-- <div class="row"> -->
<div class="form-group">
<label class="col-xs-12 col-sm-4 col-md-4 col-lg-4 control-label " for="prepare_chosen_select">Region </label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select data-placeholder="Select Region" style="display: none;" class="form-control chosen-select" multiple="" tabindex="-1" id="chosen_filter_region_id">
<option value=""></option> <optgroup label="Australian Capital Territory"><option value="24">Canberra</option></optgroup><optgroup label="New South Wales"><option value="1">Hunter, Central & North Coasts</option><option value="2">Illawarra & South Coast</option><option value="3">Regional NSW</option><option value="4">Sydney Region</option></optgroup><optgroup label="Northern Territory"><option...
CSS
.form-group {
margin-top: 15px;
margin-bottom: 15px;
overflow: hidden;
}
.modal-dialog {
margin-top: 15px;
margin-bottom: 15px;
}