JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

<div id="DivCategory" style="width: auto; float: left; padding-left: 10px;" visble="false">
<h4>Category</h4>
<select id="lbCategory" multiple="multiple" name="lbCategory" size="4">
                <option value="1">Auto</option>
                <option value="2"> - BBB</option>
                <option value="3"> - Fuel</option>
                <option value="4">Business / Work</option>
                <option value="5">Clothing / Shopping</option>
                <option value="6">Communications</option>
                <option value="7" selected="true">Damn long and unmanageble control name that causes width issues</option>
                <option value="8">Debt</option>
                <option value="9">Eating Out</option>
                <option value="10">Education</option>
                <option value="11">Entertainment</option>
                <option value="12"> - Android App Purchases</option>
                <option value="13">Fees / Charges</option>
                <option value="14">Gifts / Donations</option>
                <option value="15">Groceries</option>
                <option value="16"> - QFC</option>
                <option value="17"> - Safeway</option>
                <option value="18">Health / Medical</option>
                <option value="19">Home Upgrades</option>
                <option value="20">Household Items</option>
                <option value="21">Income</option>
                <option value="22">Insurance</option>
                <option value="23">Investment (exp)</option>
                <option value="24">Investment (income)</option>
                <option value="25">Misc</option>
            </select>
</div>

CSS

/*multiselect*/
.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }

.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:1px }
.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

/* remove label borders in IE6 because IE6 does not support transparency */
* html .ui-multiselect-checkboxes label { border:none }

/* set width of select = width of button */
#lbCategory {
    width: 175px;
}

JavaScript

(function($,undefined){var multiselectID=0;var $doc=$(document);$.widget("ech.multiselect",{options:{header:true,height:175,minWidth:225,menuWidth:null,classes:"",checkAllText:"Check all",uncheckAllText:"Uncheck all",noneSelectedText:"Select options",selectedText:"# selected",selectedList:0,show:null,hide:null,autoOpen:false,multiple:true,position:{}},_create:function(){var el=this.element.hide();var o=this.options;this.speed=$.fx.speeds._default;this._isOpen=false;this._namespaceID=this.eventNamespace||"multiselect"+multiselectID;var button=(this.button=$('<button type="button"><span class="ui-icon ui-icon-triangle-2-n-s"></span></button>')).addClass("ui-multiselect ui-widget ui-state-default ui-corner-all").addClass(o.classes).attr({title:el.attr("title"),"aria-haspopup":true,tabIndex:el.attr("tabIndex")}).insertAfter(el),buttonlabel=(this.buttonlabel=$("<span />")).html(o.noneSelectedText).appendTo(button),menu=(this.menu=$("<div />")).addClass("ui-multiselect-menu ui-widget ui-widget-content ui-corner-all").addClass(o.classes).appendTo(document.body),header=(this.header=$("<div />")).addClass("ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix").appendTo(menu),headerLinkContainer=(this.headerLinkContainer=$("<ul />")).addClass("ui-helper-reset").html(function(){if(o.header===true){return'<li><a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>'+o.checkAllText+'</span></a></li><li><a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>'+o.uncheckAllText+"</span></a></li>"}else if(typeof o.header==="string"){return"<li>"+o.header+"</li>"}else{return""}}).append('<li class="ui-multiselect-close"><a href="#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li>').appendTo(header),checkboxContainer=(this.checkboxContainer=$("<ul />")).addClass("ui-multiselect-checkboxes...