JSFiddle - React, Tailwind, and code Playground

HTML

<div class="awards-cards">
  <div class="award-card__wrapper">
    <div class="w1">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w1">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w2">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w2">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w1">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w2">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w1">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w2">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w2">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w1">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w2">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w3">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w1">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w2">data inside</div>
  </div>
  <div class="award-card__wrapper">
    <div class="w1">data inside</div>
  </div>

</div>

CSS

.awards-cards {
  column-count: 4;
  column-gap: 1em;

}

.award-card__wrapper {
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}

.w1{
  height:40px;
}

.w2{
  height:90px;
}

.w3{
  height:140px;
}


@media only screen and (max-width: 480px) {
.awards-cards {
  column-count: 3;
  column-gap: 1em;
}
}