JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <span class="label">first choice</span>
        <span class="hide">This is the wider choice</span>
    </li>
    <li>
        <span class="label">choice</span>
        <span class="hide">This is the wider choice</span>
    </li>
    <li>
        <span>This is the wider choice</span>
    </li>
    <li>
        <span class="label">other choice</span>
        <span class="hide">This is the wider choice</span>
    </li>
</ul>

CSS

body{background:#ccc}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
li{
    background: red;
    float: left;
    margin: 5px;
}

.label{
    position: absolute;
}

.hide{
    visibility: hidden;
}