JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row" style='100%;margin-left:0px'>
        <div class="iconcolumn">icons</div>
        <div class="updatecolumn">555</div>
        <div class="textcolumn"><span class="title">1 2 3 4 5 6</span><span> 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </span></div>
    </div>
    <div class="row" style='calc(100%-10px);margin-left:10px'>
        <div class="iconcolumn">icons</div>
        <div class="updatecolumn">1</div>
        <div class="textcolumn"><span class="title">1 2 3 4 5 6</span><span> 7 8 9 10</span></div>
    </div>
    <div class="row" style='calc(100%-20px);margin-left:20px'>
        <div class="iconcolumn">icons</div>
        <div class="updatecolumn">99999</div>
        <div class="textcolumn"><span class="title">1 2 3 4 5 6</span><span> 7 8 9 10 11 12 13 14 15 16 17 18 19 20</span></div>
    </div>

CSS

.row {
    height: 1.8em;
    line-height:1.8em;
    border: 2px solid black;
}

.iconcolumn {
    float:left;
    border: 1px solid green;
}

.textcolumn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid blue;
}

.updatecolumn {
    float:right;
    border: 1px solid green;
}

.title {
    font-weight: bold;
}