JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="form-group">
   
    <div class="col-md-4">
        <select id="test" class="multiselect-ui form-control" multiple="multiple">
            <option value="cheese">Cheese</option>
            <option value="tomatoes">Tomatoes</option>
            <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="onions">Onions</option>
            <option value="mozarella1">Mozzarella</option>
            <option value="mushrooms1">Mushrooms</option>
            <option value="2pepperoni">Pepperoni</option>
            <option value="3onions">Onions</option>
        </select>
    </div>
</div>

CSS

.btn-block {width : auto !important;}

JavaScript

var total = $('#test option').length;
var options = $('#test option');

var allText = $.map(options ,function(option) {
    return option.value;
}).join(',');

$('#test').multiselect({numberDisplayed: total,allSelectedText : allText});