JSFiddle - React, Tailwind, and code Playground

HTML

<div class='a'>
 <div class='b'>
   БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ 
 </div>
 <div class='c'>
   Текст 1 
 </div>
 <div class='d'>
   Текст 2
 </div>
</div>

CSS

.a {
  height: 29px;
  width: 500px;
  background: #f231ad;
  line-height: 29px;
  padding: 0 10px;
}


.a > div{
  display: inline-block;
}

.b {
  overflow: hidden;
  max-width: 370px;
  white-space: nowrap;
  font-size: 18px;
  color: #FFF;
}

.c {
  font-size: 14px;
  padding: 0 5px;
}

.d {
  font-size: 12px;
  padding: 0 5px;
}