JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexbox">
  <section>
    <a href="javascript:void(0)">
      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
    </a>
  </section>

  <section>
    <a href="javascript:void(0)">B</a>
  </section>

  <section>
    <a href="javascript:void(0)">C</a>
  </section>
  
  <section>
    <a href="javascript:void(0)">D</a>
  </section>
  
  <section>
    <a href="javascript:void(0)">E</a>
  </section>
  
  <section>
    <a href="javascript:void(0)">GF</a>
  </section>
  
</div>

CSS

.flexbox {
  display: flex;
}

.flexbox > section {
  flex: 1;
  display: flex;
  text-align: center;
  margin: 10px;
  min-width: 50px; /* to prevent text overflow; remove to allow buttons to shrink to 0 width */
  border: 1px solid #777;
  background: linear-gradient(to bottom, #fafafa 0%, #ddd 100%);
}

.flexbox > section > a {
  flex: 1; 
  padding: 2px 5px;
  color: black;
  text-decoration: none;
}

.flexbox > section:hover {
  background: linear-gradient(to bottom, #f1f1f1 0%, #d1d1d1 100%);
}