JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="flexbox">
      <div class="flexbox__img"></div>
      <div class="flexbox__main">
          <div class="flexbox__text">Очень много текста, чтобы уместиться в одну строку.</div>
      </div>
  </div>
  <div class="flexbox">
      <div class="flexbox__img"></div>
      <div class="flexbox__main">
          <div class="flexbox__text">Мало текста</div>
      </div>
  </div>
  <div class="flexbox">
      <div class="flexbox__img"></div>
      <div class="flexbox__main">
          <div class="flexbox__text">Очень много текста, чтобы уместиться в одну строку.</div>
      </div>
  </div>
</body>
</html>

CSS

.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 300px;
  margin: 10px;
  background: #0f0;
}
.flexbox__img {
  width: 50px;
  height: 50px;
  background: #000;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.flexbox__main {
  background: #000;
  color: #fff;
  margin-left: 20px;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.flexbox__text {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}