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;
  
  overflow: scroll;
  width: 100%;
}

.block-element {
    display: flex;
    align-items: center;
    border: 1px solid blue;
    padding: 5px;
    margin-left: 20px;
}
.block-element:first-of-type{
  margin-left:auto;
}
.block-element:last-of-type {
  margin-right: auto;
}