JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left" style="background-color: red; float: left; width: 50%; height: 400px;">
  My Big Imgsdfewfwefewf
</div>

<div class="right" style="background-color: black; float: left; width: 50%; height: 400px;">
  <div class="thumb">1</div>
  <div class="thumb">2</div>
  <div class="thumb">3</div>
  <div class="thumb">4</div>
  <div class="thumb">5</div>
  <div class="thumb">6</div>
  <div class="thumb">7</div>
  <div class="thumb">8</div>
  <div class="thumb">9</div>
  <div class="thumb">Layout needs to be on two columns,<br/>so I change justify-content property !</div>
</div>

CSS

.right{
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

.thumb{
  color: #fff;
  border: 1px solid red;
  padding: 10px;
  background-color: #fff;
  color: #000;
}