JSFiddle - React, Tailwind, and code Playground

by flytwokites

HTML

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

CSS

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