JSFiddle - React, Tailwind, and code Playground

HTML

<div class="single-line">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

<br>

<div class="wrap-line">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

CSS

.single-line {
  border:solid 1px blue;
  width:50%;
  overflow-x:scroll;
}

.wrap-line {
  border:solid 1px green;
  width:50%;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.single-line ul {
  flex-wrap: nowrap;
   justify-content: flex-start;
}

.wrap-line ul {
  flex-wrap: wrap;
  align-items: flex-end;
}
.wrap-line ul li:last-of-type {
  margin-top: 3em;
}

li {
  display:block;
  width:40px;
  height:40px;
  flex-shrink: 0;
  background:gray;
  text-align:center;
  border:solid 1px red;
  line-height:40px;
}