JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<select class="resizing-select">
  <option>All</option>
  <option>books</option>
  <option>audiobooks</option>
  <option>Living and more fsadf ad fgad g adf ga dfg adfg</option>
</select>
<span class="helper-element" aria-hidden="true"></span>

CSS

:root {
  --dynamic-size: 20px;
  --arrow-size: 20px;
  --select-size: calc(var(--dynamic-size) + var(--arrow-size));
}

.resizing-select {
  width: var(--select-size);
}

.helper-element {
  position: absolute;
  top: 0;
  left: -9999px;
}

/* CSS for presentation only */
* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

JavaScript

const resizingSelect = document.querySelector(".resizing-select");
const helperElement = document.querySelector(".helper-element");

resizingSelect.addEventListener("change", initResize);

function initResize(event) {
  helperElement.innerHTML = event.target.querySelector(
    "option:checked"
  ).innerText;
  resize(helperElement.offsetWidth);
}

function resize(width) {
  const root = document.documentElement;
  root.style.setProperty("--dynamic-size", `${width}px`);
}