JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="container">
    <div class="flex-list">
      <div class="item">One</div>
      <div class="item">Two</div>
      <div class="item">Three</div>
      <div class="item">Four</div>
      <div class="item">Five</div>
      <div class="item">Six</div>
      <div class="item">Seven</div>
    </div>
  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}

.container {
  background: #f03;
  position: relative;
  display: inline-block;
  width: auto;
  padding: 20px;
}

.flex-list {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  max-height: 300px;
  width: auto;
  align-content: flex-start;
  justify-content: space-between;
  background-color: #486d86;
  writing-mode: vertical-lr;
}

.item {
  background: #fe3;
  width: 100px;
  margin-bottom: 20px;
  height: 100px;
  margin: 10px;
  writing-mode: horizontal-tb;
}