JSFiddle - React, Tailwind, and code Playground

HTML

<h1>different heights</h1>
<div class="gallery-height">
  <div class="img" style="height:125px;background:orangered">1</div>
  <div class="img" style="height:290px;background:#9B2322">2</div>
  <div class="img" style="height:130px;background:#D968D9">3</div>
  <div class="img" style="height:205px;background:#FA9">4</div>
  <div class="img" style="height:130px;background:#5D9999">5</div>
  <div class="img" style="height:210px;background:#FCA200">6</div>
  <div class="img" style="height:125px;background:#14AFCB">7</div>
  <div class="img" style="height:290px;background:#FF0087">8</div>
  <div class="img" style="height:130px;background:#bb0303">9</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #1E1E1E;
}

.gallery-height {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}

h1 {
  text-align: center;
  color: #fff;
  text-transform: capitalize
}

.img {
  width: 30%;
  background-color: orange;
  margin: 5px;
  color: aliceblue;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 45px;
  border-radius: 2px;
}

/* 
Hakkam Abdullah
19/6/2017 
*/