Flex model with clamped list item

by philipjmurphy

HTML

<ul>
    <li>
        <span class="img"></span>
        <span class="label">Acclaim</span>
        <span class="currency">(USD 50)</span>
    </li>

    <li>
        <span class="img"></span>
        <span class="label">Acclaim 1 11 111 1111 11111</span>
        <span class="currency">(USD 50)</span>
    </li>
    
    <li>
        <span class="img"></span>
        <span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span>
        <span class="currency">(USD 50)</span>
    </li>
</ul>

CSS

ul {
    width: 400px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    
    background-color: yellow;
    padding: 0;
    margin: 0;
}

li {
    display: -webkit-box;

    padding-right: 50px;
}
 
.label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;

    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3em;
    margin-right: 0.2em;    
    
    background-color: pink;    
}

.currency {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;

    white-space: nowrap;
    
    background-color: lightgreen;    
}

.img {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: 0.1em;

       ...