JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="grid">
  <li class="tile">
    <div class="container">
      <div class="content">
        <i>i</i>
        <div class="title">
          Education
        </div>
      </div>
    </div>
  </li>
  <li class="tile">
    <div class="container">
      <div class="content">
        <i>i</i>
        <div class="title">
          title containnnng longish words
        </div>
      </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;
  text-align:center;
}

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

.title {
  max-width:calc(100% - 10px);
  display:inline;
}

.content {
  
}