JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li> <a class="left">Option 1</a>
 <a class="right">Only</a>

    </li>
    <li> <a class="left">Option 2</a>
 <a class="right">Only</a>

    </li>
</ul>

CSS

ul {
    list-style-type: none;
}
li {
     overflow: hidden;
}
.left {
    float: left;
}
.right {
    float: right;
    opacity: 0;
}
li > a {
    display: block;
}
li:hover > a {
    text-decoration: underline;
    opacity: 1 !important;
}