JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown" id="dropdown">
    <input type="text">
    <div class="options">
        <label>
            <input type="radio" name="r" value="111" checked>
            <div class="value">11text11</div>
        </label>
        <label>
            <input type="radio" name="r" value="222">
            <div class="value">22text22</div>
        </label>
        <label>
            <input type="radio" name="r" value="333">
            <div class="value">33text33</div>
        </label>
        <label>
            <input type="radio" name="r" value="444">
            <div class="value">44text44</div>
        </label>
        <label>
            <input type="radio" name="r" value="555">
            <div class="value">55text55s</div>
        </label>
    </div>
</div>

CSS

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

#dropdown{
    border: 1px solid;
    width: 200px;
    border-radius: 2px;
}
#dropdown .value:hover,
#dropdown :checked + .value{
    background-color: #dadada;
}
#dropdown .value{
    width: 100%;
    display: flex;
    align-items: center;
    text-indent: 10px;
}


/* Логика */
#dropdown{
    position: relative;
    --item-height: 30px;
    --list-height: 200px;
}
#dropdown,
#dropdown .options .value{
    height: var(--item-height);
}
#dropdown input{
    opacity: 0;
    position: absolute;
}
#dropdown .options{
    position: absolute;
    width: 100%;
    top: 0;
    padding-top: var(--item-height);
    overflow: hidden;
    height: 0;
    transition: 0s .1s height;
}
#dropdown > :focus + .options{
    height: var(--list-height);
    overflow-y: scroll;
}
#dropdown .options :checked + .value{
    position: absolute;
    top: 0;
}
#dropdown > input:not(:focus){
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3;
}
#dropdown > input{
    position: relative;
}