JSFiddle - React, Tailwind, and code Playground

HTML

<div class="replacementcontainer">
    
<select>
    <option value="hello">Hello</option>
    <option value="goodbye">Goodbye</option>
</select>
<span>my name is</span>
<select>
    <option value="rick">Rick</option>
    <option value="bobby">Bobby</option>
</select><span>, nice to meet you.</span>

</div>

CSS

*{font-family:sans-serif;font-size:15px}

.replacementcontainer {
    margin: 10px;
}
.replacementcontainer span {
    display: inline-block;
    margin-bottom: -4px;
}

.jsselect {
    color: #3084CA;
    text-decoration: underline;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
}
.selwrapper {
    display: inline-block;
    overflow: hidden;
}
.hiddenspan {
    visibility:hidden;
    position:absolute;
}

JavaScript

$('.replacementcontainer select').each(function(){
    
    var apply = function(el){
    
        var text = $('option[value='+el.val()+']').html();
        
        var span;
        if (el.data('initialized'))
        {
            span = el.parent().next().html(text);
        }
        else
        {
            
            el.data('initialized', true);
            
            el.after('<span id="'+el.val()+'" class="jsselect hiddenspan">'+text+'</span>');
            el.wrap($('<span class="selwrapper"></span>'));
            
            span = el.parent().next();
            span.addClass('jsselect');
            el.addClass('jsselect');
            
        }
        el.parent().width(span.width() + 5);
        
        var two = span.width();
        
    };
    
    apply($(this));
    $(this).change(function(){ apply($(this)); });
    
});