JSFiddle - React, Tailwind, and code Playground

Drop Down List

by pmamode

HTML

<script>
  function setSelectWidth() {
    var sel = $('#sel');
    $('#templateOption').text(sel.val());
    sel.width($('#template').width() * 1.03);
  }

</script>

<body onload="setSelectWidth()">
  <select id="template" style="display:none;">
    <option id="templateOption"></option>
  </select>
  <span>Every good boy does fine.  </span>
  <select id="sel" onChange=" setSelectWidth();">
    <option>Short</option>
    <option>LongLongLongLongLongLong</option>
    <option>LongLongLongLongLongLongLongLongLongLongLongLong</option>
  </select>
  <span>Every good boy does fine.  </span>
</body>

CSS

select {
  border: 0 !important;
  /*Removes border*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: '';
  text-indent: 0.01px;
  /* Removes default arrow from firefox*/
  text-overflow: "";
  /*Removes default arrow from firefox*/
}

select::-ms-expand {
  display: none;
}

.select-wrapper {
  padding-left: 0px;
  overflow: hidden;
}