I'm trying to create a dropdown that looks like a heading with an underline underneath it. The underline (bottom border) should dynamically adjust its width to match the currently selected text, not the longest option in the dropdown. Here is what I've tried: 1). Setting width: auto - select element still sizes to longest option 2.) Using useRef and useEffect to measure text width with a temporary span element and setting inline style - didn't work 3). JavaScript approach to calculate text width using canvas measureText. Here is my codesandbox: https://codesandbox.io/p/sandbox/smln2r