JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<label for="files">Select a file</label>
<br>
<select name="files" id="files" class="menu-button">>
    <optgroup label="Scripts">
        <option value="jquery">jQuery.js</option>
    </optgroup>
    <optgroup label="Other files">
        <option value="someotherfile">Some other file with a very long option text</option>
    </optgroup>
</select>
<input type="button" id = "but1" value="Button1"/><br>

CSS

.ui-selectmenu-button {
    vertical-align : top;
}
.ui-selectmenu-button .ui-selectmenu-text {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
}

JavaScript

$(function () {
      $("#files").selectmenu({
          width: 200
      });
      $("#but1").button();
  });