JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="container">
  <div class="item">
    <div class="media">media01</div>
    <div class="texts">
      <div class="label">label01</div>
      <div class="ellispsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quibusdam, illo nostrum expedita! Amet fuga perferendis expedita fugiat, assumenda maiores animi sequi dicta error! Nam.</div>
    </div>
  </div>
  <div class="item">
    <div class="media">media02</div>
    <div class="texts">
      <div class="label">label02</div>
     <div class="ellispsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quibusdam, illo nostrum expedita! Amet fuga perferendis expedita fugiat, assumenda maiores animi sequi dicta error! Nam.</div>
    </div>
  </div>
  <div class="item">
    <div class="media">media03</div>
    <div class="texts">
      <div class="label">label03</div>
      <div class="ellispsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quibusdam, illo nostrum expedita! Amet fuga perferendis expedita fugiat, assumenda maiores animi sequi dicta error! Nam.</div>
    </div>
  </div>
  <div class="item">
    <div class="media">media04</div>
    <div class="texts">
      <div class="label">label04</div>
      <div class="ellispsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quibusdam, illo nostrum expedita! Amet fuga perferendis expedita fugiat, assumenda maiores animi sequi dicta error! Nam.</div>
    </div>
  </div>
  <div class="item">
    <div class="media">media05</div>
    <div class="texts">
      <div class="label">label05</div>
      <div class="ellispsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quibusdam, illo nostrum expedita! Amet fuga perferendis expedita fugiat, assumenda maiores animi sequi dicta error! Nam.</div>
    </div>
  </div>
  <div class="item">
    <div class="media">media06</div>
    <div class="texts">
      <div class="label">label06</div>
      <div...

CSS

.container{
  width: 500px;
  display: flex;
  gap: 16px;
  flex-direction: column;
  border: 1px solid red;
}
.item{
  display: grid;
  grid-template-columns: '100px 1fr';
  gap: 16px;
}
.media{
  width:100px;
}
.texts{
  border: 1px dotted blue;
}
.ellispsis{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}