JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="wrap">
    <div class="img"><img src="http://yandex.st/lego/_/X31pO5JJJKEifJ7sfvuf3mGeD_8.png" alt=""><span>подпись</span></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum blanditiis assumenda facere consectetur accusantium unde harum perspiciatis eius quidem iste id sunt quam asperiores eaque inventore expedita enim repudiandae quae.</div>
</div>
    
    <div class="wrap">
    <div class="img"><img src="http://yandex.st/lego/_/X31pO5JJJKEifJ7sfvuf3mGeD_8.png" alt=""><span>подпись длинная длинная</span></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum blanditiis assumenda facere consectetur accusantium unde harum perspiciatis eius quidem iste id sunt quam asperiores eaque inventore expedita enim repudiandae quae.</div>
</div>

CSS

.wrap{
    overflow: hidden;
}

.img{
    float: left;
    width: 100px;
    margin-right: 20px;
}

img{
    display: block;
    margin-bottom: 10px;
}

span{
    display: block;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text{
    overflow: hidden;
}