JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Horizontal</h1>
<div class="flex horizontal">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

<h1>Vertical</h1>
<div class="flex vertical">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

CSS

.box {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid black;
  margin: 20px;
  text-align: center;
  line-height: 50px;
}
.flex {
  display: inline-flex;
  background: green;
  flex-wrap: wrap;
}
.flex.horizontal {
  width: 300px;
  flex-direction: row;
}
.flex.vertical {
  height: 250px;
  flex-direction: column;
}