JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<select id="simple">
    <option>long option</option>
    <option selected>short</option>
</select>
<br/>

<select id="dynamic">
    <option>long option</option>
    <option selected>short</option>
</select>

JavaScript

$("#simple").selectmenu()
$("#dynamic").each(function(){
    var $this=$(this);
    $this.selectmenu();
    var menu=$this.selectmenu("menuWidget");
    var button=$this.selectmenu("widget");
    button.click();
    var longest=null;
    menu.children("li").each(function(){
        var $this=$(this);
        if(longest==null || longest.text().length < $this.text().length){
            longest=$this;
        }
    });
    menu.css("width","auto");
    var width=longest.mouseover().width();
    button.click();
    var paddingRight=parseFloat(button.children().last().css("padding-right"));
    var paddingLeft=parseFloat(button.children().last().css("padding-left"));
    var total=width+paddingLeft+paddingRight + 2;
    $this.selectmenu("option","width", total);
})