JSFiddle - React, Tailwind, and code Playground
HTML
<select id="resizing_select" name="fieldOfInterest" class="form-control" required="">
<option value="-1">SELECT ONE</option>
<option value="4893" class="option100">Actual(R)rrrrrrrrrrrrrrrr</option>
<option value="4891" class="option100">Customerrrrrrrrrrrrrr</option>
<option value="4892" class="option100">Daterrrrrrr</option>
<option value="4894" class="option100">Forecast(R)RRRRRR</option>
</select>
<select id="width_tmp_select">
<option id="width_tmp_option"></option>
</select>
CSS
#resizing_select {
width: 107px;
}
#width_tmp_select{
display : none;
}
JavaScript
$(document).ready(function() {
$('#resizing_select').change(function(){
$("#width_tmp_option").html($('#resizing_select option:selected').text());
$(this).width($("#width_tmp_select").width());
});
});