JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="container">
    <div class="div1">
      <div class="img">
      </div>
    </div>
    <div class="div2">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="div3">
      <div class="text">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores similique incidunt, magni quidem nemo provident repudiandae iusto eos dolore voluptatibus quam hic, porro ab fugit nulla voluptatem reprehenderit facilis quasi esse animi? Sequi saepe dolor similique corrupti nostrum adipisci quia magni reiciendis suscipit, perferendis alias ea tempore necessitatibus error, sint autem in, veniam, obcaecati nihil pariatur ipsam laboriosam. Vel nesciunt ipsa ipsam odio praesentium quos ut similique veniam molestias? Recusandae eligendi assumenda ad quasi magnam repellendus labore nulla eaque praesentium ea, alias eos asperiores eius beatae officia pariatur temporibus quis at architecto incidunt earum. Corporis sit facere aliquam asperiores sequi!
      </div>
      <div class="ellipsis">
       Очень длинная строка текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
      </div>
    </div>
  </div>
</div>

CSS

.content{
  width: 300px;
  background: #ddd;
  height: 100%;
  padding: 15px
}
.container {
  width: 100%;
  display: grid;
	grid-template-columns: min-content auto;
  gap: 6px;
}
.div1{
  grid-area: 1 / 1 / 2 / 2; background: green;
}
.div2{
  grid-area: 1 / 2 / 2 / 2; background: orange;
}
.div3{
  grid-area: 2 / 1 / 3 / 3; background: yellow;
}
.ellipsis{
  background: purple;
  color: #fff;
  overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.img {
  width: 50px;
  height: 50px;
  background: #ddd;
  border-radius: 30px;
  margin: 5px;
}