JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <button class="button">
    <span class="button-text">
      ab
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcd
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefg
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefghij
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefghijklm
    </span>
  </button>
  <button class="button">
    <span class="button-text">
      abcdefghijklmnop
    </span>
  </button>
</div>

CSS

.grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2.5rem;  /* FF only */
  column-gap: 2.5rem;  /* FF only */
}

.button {
  max-width: 11.3rem;
  min-width: 1rem;
  padding: 1rem;
  outline: 1px solid rgba(110, 110, 110, 0.34);
  color: white;
  background-color: #1d1f1f;
  font-family: Calibri;
  font-size: 1.4rem;
  font-weight: bold;
}