In the following code, I have arranged a few divs to align horizontally. I want to create 3 rows and in each row, I want divs to move horizontally to the left at varying speeds.

Check this giphy for visual reference : <http://www.giphy.com/gifs/ME8Av6LT9hgymDnqSP>

```css
.roundeddivs {
  background: white;
  white-space: nowrap;
  padding: 20px 25px;
  border-radius: 44px;
  max-height: "1px";
  width: auto;
  margin: 8px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.block {
  padding: 6rem 2rem;
}

.arrangeflex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 25px;
}
```

```html
<section>
<div class="block  ">
<div class="arrangeflex">
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
</div>
</section>
```

[![enter image description here](https://i.stack.imgur.com/nKuo0.png)](https://i.stack.imgur.com/nKuo0.png)

Animated like this ([animated GIF)](https://media3.giphy.com/media/ME8Av6LT9hgymDnqSP/giphy.gif?cid=790b761124aee8cb497433a465102821f816dc2752a1b712&rid=giphy.gif&ct=g):

[![enter image description here](https://i.stack.imgur.com/jgl5x.png)](https://i.stack.imgur.com/jgl5x.png)