JSFiddle - React, Tailwind, and code Playground
HTML
<div class="cols border">
<div class="flex--0 border padding--sm">
Icon
</div>
<div class="flex--1 border padding--sm">
<div class="ellipsis">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
</div>
<div>Icon</div>
<div>Icon</div>
<div>Icon</div>
</div>
</div>
CSS
.cols {
display: flex;
}
.flex--0 {
flex: 0 0 auto;
}
.flex--1 {
flex: 1 1 auto;
min-width: 0;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.border {
border: 1px solid gray;
}