JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 250px;">Дата</div> 
<div class="swt_heading" style="margin-bottom: 20px;">
  <div class="heading-name">LISAP, Hair комп, Шварц, Эстель</div> 
  <div class="heading-name">MATRIX</div> 
  <div class="heading-name">БАНК</div> 
  <div class="heading-name">БЕЗНАЛ</div> 
  <div class="heading-name">Коммун. услуги</div> 
  <div class="heading-name">Косметология</div> 
  <div class="heading-name">Н.В.</div> 
  <div class="heading-name">Налоги</div> 
  <div class="heading-name">Оборудование</div> 
  <div class="heading-name">Прочее</div> 
  <div class="heading-name">Расходники</div> 
  <div class="heading-name">Реклама</div> 
  <div class="heading-name">Хоз.нужды</div>
  <div class="heading-name">Расходники</div> 
  <div class="heading-name">Реклама</div> 
  <div class="heading-name">Хоз.нужды</div>
</div>

CSS

.swt_heading {
  overflow-x: scroll;
  width: 700px;
  display: flex;
}

.heading-name {
  font-weight: bold;
  font-size: 15px;
  padding:0 15px;
  color: #9D9D9D;
 
}