JSFiddle - React, Tailwind, and code Playground

HTML

<select class="shortened-select" id="options">
  <option value="" id="nonOption"></option>
  <option value="Open" data-descr="some description" selected></option>
  <option value="Closed" data-descr="a bunch of text"></option>
</select>

JavaScript

function focus(e) {
  [].forEach.call(this.options, function(o) {
    if (o.id === 'nonOption'){
       o.textContent = document.getElementById('options').value;
       o.selected = 'selected';
       o.style = 'display:none;';
    }
    else
    {
      o.textContent = o.getAttribute('value') + ' (' + o.getAttribute('data-descr') + ')';
    }
  });

}

function blur(e) {

  [].forEach.call(this.options, function(o) {
  
    if (o.selected === true && o.id === 'nonOption'){
    //selectedOption = o;
     o.selected = 'selected';
    }
    else
    o.textContent = o.getAttribute('value');
  });
 this.blur();

 }

[].forEach.call(document.querySelectorAll('.shortened-select'), function(s) {
  s.addEventListener('focus', focus);
  s.addEventListener('change', blur);
  blur.call(s);
});