JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="grid">
  <li class="tile">
    <div class="container">
      <i>i</i>
      <div class="title">
        Education
      </div>
    </div>
  </li>
  <li class="tile">
    <div class="container">
      <i>i</i>
      <div class="title">
        title containnnng longish words
      </div>
    </div>
</ul>

SCSS

ul.grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tile {
  /* float: left; */
  display: block;
  width: 150px; /* this is a percentage of the container width in real life */
  height: 80px;
  background-color: rgb(192, 230, 245);
  margin: 5px;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* this is an icon, I just don't feel like importing font awesome here */
i {
  margin-right: 5px;
}