JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="container">
    <li>
        <div class="item"> <span class="text">Text 1</span>
 <span class="icon">12</span>

        </div>
    </li>
    <li>
        <div class="item"> <span class="text">Text 2 Text 2</span>
 <span class="icon">12</span>

        </div>
    </li>
    <li>
        <div class="item"> <span class="text">Text 3 Text 3 Text 3</span>
 <span class="icon">12</span>

        </div>
    </li>
    <li>
        <div class="item"> <span class="text">Text 4 Text 4 Text 4</span>
 <span class="icon"></span>

        </div>
    </li>
</ul>

CSS

body {
    font-size: 20px;
}
.container {
    width: 150px;
    background: #ff0;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.container li {
    border-bottom: 1px solid #000;
}
.item {
    width:100%;
    overflow: hidden;
}
.item >span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:70%;
    display:inline-block;
}
.icon {
    background: #f00;
    display:inline-block;
    max-width:50px;
}