JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<div class="grid">
  <div class="grid__inner">

    <div class="item">
      <div class="icon">
        icon
      </div>
      <div class="title">
        <h4>Title</h4>
      </div>
      <span>subtext</span>
    </div>

    <div class="item">
      <div class="icon">
        icon
      </div>
      <div class="title">
        <h4>Title</h4>
      </div>
      <span>subtext</span>
    </div>

    <div class="item">
      <div class="icon">
        icon
      </div>
      <div class="title">
        <h4>Title</h4>
      </div>
      <span>subtext</span>
    </div>

    <div class="item">
      <div class="icon">
        icon
      </div>
      <div class="title">
        <h4>Title</h4>
      </div>
      <span>subtext</span>
    </div>

    <div class="item">
      <div class="icon">
        icon
      </div>
      <div class="title">
        <h4>Title</h4>
      </div>
      <span>subtext</span>
    </div>

  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

/* 
.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 15px;
}
*/

.grid {
  display: flex;
  flex-direction: column;
}

.grid__inner {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -15px;
}

.item {
  border: 1px solid;
  width: calc(50% - 15px);
  margin: 20px 0 0 15px;
}