JSFiddle - React, Tailwind, and code Playground

by Martin Parenteau

HTML

<div id="legend">This is the smallest width necessary</div>

<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">123</div>
</div>
<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div">Lorem ipsum dolor</div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">24</div>
</div>
<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div"><strong>I_am_the_long_trouble_maker_that_stretches</strong></div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">8</div>
</div>
<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div">Sint, itaque, cupiditate Lorem ipsum dolor sit</div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">721</div>
</div>
<div class="wrapper-div">
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="text-div">Lorem ipsum dolor</div>
    <div class="icon-div">
        <div class="icon"></div>
    </div>
    <div class="number-div">17</div>
</div>

CSS

body {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    background: #e4e8eb;
}

#legend {
    padding: 4px 0px;
    background-color: orange;
    color: black;
    width: 320px;
    margin: 20px auto 20px;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
}

.wrapper-div {
    display: flex;
    align-items: center;
}

.icon-div {
    flex: 0 0 auto;
    padding: 4px 6px;
}

.text-div {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 0 0px;
}

.number-div {
    flex: 0 0 32px;
}

.icon-div .icon {
    background: #8da2b5;
    border-radius: 3px;
    display: block;
    height: 23px;
    width: 23px;
}