JSFiddle - React, Tailwind, and code Playground

HTML

<select id="ex-1">
    <option class='1'>item one</option>
    <option class='1'>item two</option>
    <option class='1'>item three</option>
</select>


<p class="text">Before clicking on the select above, notice the text is justified to the right.  This is what I'm looking for.  The idea is that when you click it, the text in the dropdown menu that appears would be left-justified</p>

CSS

#ex-1 {
    direction: rtl;
    width: 120px;
}
.1 {
    direction: ltr;
}
span {
    font-weight: bolder;
}

JavaScript

$('#ex-1').click(function(){
    if($('#but_unfortunately').length == 0) {
        $('.text').append('<span id="but_unfortunately"> (but it is not)</span>');
    }
})