JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css">
<select class="chosen-select" data-placeholder="Select Corporate Group...">
<option></option>
<option>Piemonte</option>
<option>Lombardia</option>
<option>Veneto</option>
<option>Trentino</option>
</select>
<br>
<br>
<select class="chosen-select" data-placeholder="Select Country..." multiple>
<option></option>
<option>Piemonte</option>
<option>Lombardia</option>
<option>Veneto</option>
<option>Trentino</option>
</select>
<br>
<br>
<select class="chosen-select" data-placeholder="Select Region..." multiple>
<option></option>
<option>Piemonte</option>
<option>Lombardia</option>
<option>Veneto</option>
<option>Trentino</option>
</select>
<br>
<br>
<select class="chosen-select" data-placeholder="Select City..." multiple>
<option></option>
<option>Piemonte</option>
<option>Lombardia</option>
<option>Veneto</option>
<option>Trentino</option>
</select>
<br>
<br>
<select class="chosen-select" data-placeholder="Select Company...">
<option></option>
<option>Piemonte</option>
<option>Lombardia</option>
<option>Veneto</option>
<option>Trentino</option>
</select>
CSS
li.search-field {
width: 100%;
}
li.search-field input.default {
width: auto !important;
}
JavaScript
$('.chosen-select').chosen();
$('.chosen-container').css('width', '200px');