JSFiddle - React, Tailwind, and code Playground

HTML

<select id="select" >
<option>text text</option>
<option>text text text text text</option>
<option>text text text </option>
<option>text text text text </option>
<option>text</option>
<option>text text text text text text text text text</option>
<option>text text</option>
</select>

JavaScript

var resized = false;

document.getElementById('select').addEventListener(
     'change',
     function() { resizeSelect(this.selectedItem); },
     false
  );
document.getElementById('select').addEventListener(
     'blue',
     function() { resizeSelect(this.selectedItem); },
     false
  );
document.getElementById('select').addEventListener(
     'focus',
     function() { restoreSelect(); },
     false
  );

function resizeSelect(selected) {
  if (resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].title=sel.options[i].innerHTML;
    if (i!=sel.options.selectedIndex) sel.options[i].innerHTML='';
  }
  resized = true;
  sel.blur();
}

function restoreSelect() {
  if (!resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].innerHTML=sel.options[i].title;
  }  
  resized = false;
}