JSFiddle - React, Tailwind, and code Playground

HTML

<!-- EXAMPLE 1 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
</div>

<!-- EXAMPLE 2 -->
<div class="main">
  <div class="block-element">
    <span>element1</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element2</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element3</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element4</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element5</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element6</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element7</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element8</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element9</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
  <div class="block-element">
    <span>element10</span>
    <div>
      text1<br>
      text2
    </div>
  </div>
</div>

CSS

.main {
  display: flex;
  justify-content: center;
  overflow: scroll;
  width: 100%;
}

.block-element {
    display: flex;
    align-items: center;
    border: 1px solid blue;
    padding: 5px;
    margin-left: 20px;
}