JSFiddle - React, Tailwind, and code Playground

HTML

<table class=flexbox>
  <tr>
    <td>
      <button>Hello there my name is bob and this is a test Hello there my name is bob and this is a test Hello there my name is bob and this is a test </button>
      <td style="vertical-align:top;">
        <button><span>B</span></button>
      </td>
      <td>
        <button><span>C</span></button>
      </td>
      <td>
        <button><span>D</span></button>
      </td>
      <td>
        <button><span>E</span></button>
      </td>
      <td>
        <button><span>GF</span></button>
      </td>
  </tr>
</table>

CSS

.flexbox {
  width: 100%;
  table-layout: fixed;
}

.flexbox tr {
  display: flex;
}

.flexbox tr td {
  flex: 1;
  display: flex;

}

button {
  flex: 1;
  position: relative;
}

button > span {
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
}