JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a>Long title for Item 1</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 2</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 3</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 4</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 5</a>
        <i class=icon></i>
    </li>
</ul>

CSS

ul {
    border: 1px solid green;
    overflow: hidden;
    padding: 0;
    list-style: none;
    width: 100px;
}

a {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 5px;
    white-space: nowrap;
    width: 50px;
}

a:hover {
    background: gray;
}

.icon {
    display: inline-block;
    float: right;
    margin-top: -20px;
    background: yellow;
}

.icon:before {
    content: "X";
}

.icon:hover:before {
    background: red;
}