JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<p>choose wisely, lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum you must</p>

<div class="altselect">
<span>Please choose</span>
<ul>
<li><label><input type="radio" name="altsel1">Foobar</label></li>
<li><label><input type="radio" name="altsel1">Baz barakim</label></li>
<li><label><input type="radio" name="altsel1">Hrsgtfwlw</label></li>
<li><label><input type="radio" name="altsel1">Option 4</label></li>
<li><label><input type="radio" name="altsel1">Sommemore</label></li>
</ul>
</div>

CSS

body { font-family:sans-serif; font-size:1.5rem; }

.altselect { position:relative; display:inline-block; border:2px solid; border-radius:.25em; }
.altselect ul { position:absolute; xtransform:translateY(-100%); transition:all 2s; overflow:hidden; margin:-4px -2px; padding:0; xmax-height:1.25em; list-style:none; background:#cccc; border:2px solid; border-radius:.25em; }
.altselect span { position:relative; z-index:1; display:inline-block; background:#fff9; }
.altselect span:hover + ul { transform:translateY(0); max-height: 100vh; max-height: calc(48em /10); }