JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <span class="icon">+</span>
        <span class="arrow">&gt;</span>
        <span class="title">Fuck CSS Looooooooooooooooooooooooooooog</span>
    </li>
</ul>

CSS

ul { list-style: none; padding: 0; width: 300px; }
li { position: relative; overflow: hidden; background: #f0f0f0; }
li>* { display: block; padding: 8px; opacity: .7; }
.icon { float: left; background: #555; color: #fff; }
.title { overflow: hidden; background: #afa; white-space: nowrap; text-overflow: ellipsis; }
.arrow { float: right; background: #d0d0d0; }