JSFiddle - React, Tailwind, and code Playground

HTML

<fielset>
<table>
										<col width=33%>
										<tr>
											<td class="rightcol">
												<label for="materialSinkModel" title="Enter sink brand name.">Model:</label>
											</td>
											<td>
												<select id="materialSinkModel" name="materialSinkModel">
													<option></option>
													<option value="blanco">Blanco</option>
													<option value="riveo 3801U170">Riveo 3801U170</option> <!-- single -->
													<option value="riveo 3808U170">Riveo 3808U170</option> <!-- 1 3/4 -->
													<option value="riveo 3809U170">Riveo 3809U170</option> <!-- 1 1/2 -->
													<option value="riveo 3816U170">Riveo 3816U170</option> <!-- double -->
													<option value="riveo 3834U170">Riveo 3834U170</option> <!-- double -->
													<option value="riveo 3814170">Riveo 3814170</option> <!-- single apron -->
													<option value="riveo 3812170">Riveo 3812170</option> <!-- single -->
													<option value="riveo 3813170">Riveo 3813170</option> <!-- 1 3/4 -->
													<option value="riveo 3821U170">Riveo 3821U170</option> <!-- single -->
													<option value="riveo 3815U170">Riveo 3815U170</option> <!-- double -->
													<option value="riveo 3811170">Riveo 3811170</option> <!-- double above -->
												</select>
											</td>
										</tr>
										<tr>
											<td class="rightcol">
												<label for="materialSinkPrice" title="Enter sink price.">Price:</label>
											</td>
											<td>
												<input type="text" id="materialSinkPrice" name="materialSinkPrice" size="20" maxlength="20" />
											</td>
										</tr>

									</table>
<fielset>

CSS

.combobox-class{
    width: 150px; /* combobox width */
}

.ui-combobox{
    display: inline-block;
    margin: 0;
    /*margin-right: 1.8em;*/
    position: relative;
}

.ui-combobox-input{
    /*border-bottom-left-radius: 0px;*/ /* when dropdown extended */
    /*border-bottom: 0px;*/ /* when dropdown extended */
    padding: 0.0em;
    padding-left: 3px;
    margin: 0;
    background: white;
}

.ui-combobox-button{
    /*border-bottom-right-radius: 0px;*/ /* when dropdown extended */
    position: absolute;
    width: 1.8em !important;
    height: 19px;
    margin: 0;
    margin-left: -1px;
    top: 0;
    bottom: 0;
}

.ui-combobox-button .ui-button-text{
    padding: 0em;
}

.ui-combobox .ui-autocomplete{
    /*border-top: 0px;*/ /* when dropdown extended */
    /*border-top-left-radius: 0px;*/ /* when dropdown extended */
    /*border-top-right-radius: 0px;*/ /* when dropdown extended */
    max-height: 100px;
    width: 122px;
    overflow-y: auto;
    overflow-x: hidden;
}

JavaScript

$('select').addClass("combobox-class")
    $('select').combobox();

(function($, undefined) {
	$.widget("ui.combobox",{
		version: "@VERSION",
		widgetEventPrefix: "combobox",
		uiCombo: null,
		uiInput: null,
		_wasOpen: false,

		_create: function(){
			var self=this,
			select=this.element.hide(),
			input, wrapper;

			input=this.uiInput=$("<input />")
				.insertAfter(select)
				.addClass("ui-widget ui-widget-content ui-corner-left ui-combobox-input")
				.val(select.children(':selected').text())
				.prop('tabindex', select.prop('tabindex'))
				.width($(this.element).width());

			wrapper=this.uiCombo=input.wrap('<span>')
				.parent()
				.addClass('ui-combobox')
				.insertAfter(select);

			input.autocomplete({
				delay: 0,
				minLength: 0,
				appendTo: wrapper,
				source: $.proxy(this, "_linkSelectList"),
				select: function(event, ui){
					//var selectedObj = ui.item;              
					$(this).prop('title', ui.item.value);
				}
			});

			$("<button>")
				.prop("tabIndex", -1)
				.prop("type", "button")
				.insertAfter(input)
				.button({
					icons:{
						primary: "ui-icon-triangle-1-s"
					},
					text: false
				})
			.removeClass("ui-corner-all")
			.addClass("ui-corner-right ui-button-icon ui-combobox-button");


			// Our items have HTML tags.  The default rendering uses text()
			// to set the content of the <a> tag.  We need html().
			input.data("ui-autocomplete")._renderItem = function(ul, item){
				return $("<li>")
				.prop('class', item.option.className)
				.append($("<a>").html(item.label))
				.appendTo(ul);
			};
			this._on(this._events);
		},

		_linkSelectList: function(request, response){
			var matcher=new RegExp($.ui.autocomplete.escapeRegex(request.term), 'i');
			//response( this.element.children('option').map(function() {
			response(this.element.children('option:not([style*="display: none"])').map(function(){           
				var text=$(this).text();

				if (this.value && (!request.term ||...