JSFiddle - React, Tailwind, and code Playground

HTML

<select>
    <option>Short</option>
    <option>A bit longer</option>
    <option>Yet a little more longer</option>
    <option>And this is definitely the longest</option>
</select>
<br />

CSS

.test {
    position: absolute;
    left: -10000px;
}

JavaScript

$('select').change(function() {
    var $opt = $(this).find("option:selected");
    var $span = $('<span>').addClass('tester').text($opt.text());

    $span.css({
        'font-family': $opt.css('font-family'),
        'font-style': $opt.css('font-style'),
        'font-weight': $opt.css('font-weight'),
        'font-size': $opt.css('font-size')
    });

    $('body').append($span);
    // The 30px is for select open icon - it may vary a little per-browser
    $(this).width($span.width() + 30);
    $span.remove();
});

$('select').change();