JSFiddle - React, Tailwind, and code Playground

HTML

<svg style="display: none;">
<symbol id="icon-airplane" viewBox="0 0 32 32">
	<title>airplane</title>
  <path d="M24 19.999l-5.713-5.713 13.713-10.286-4-4-17.141 6.858-5.397-5.397c-1.556-1.556-3.728-1.928-4.828-0.828s-0.727 3.273 0.828 4.828l5.396 5.396-6.858 17.143 4 4 10.287-13.715 5.713 5.713v7.999h4l2-6 6-2v-4l-7.999 0z"></path>
</symbol>
</svg>

<div class="flex-container">
  <a href="#">
  <span><svg class="icon icon-toolbar"><use xlink:href="#icon-airplane"></use></svg></span>
  <section>Airplane</section>
  </a>
  <a href="#">
    <span>Image 2</span>
    <section>Text 2</section>
  </a>
  <a href="#">
    <span>Image 3</span>
    <section>This tab is way bigger than the others as it's Text 3</section>
  </a>
</div>

CSS

/* Flex toolbar styling */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}
.flex-container a {
	display: flex;
	flex: 1;
	flex-direction: column;
	text-align: center;
	margin: 0 2px 5px;
	border-radius: 4px;
	padding: 8px 10px;
  color: #000;
	background-color: cyan;
}
.flex-container a:first-child {
  margin-left: 0;
}
.flex-container a:last-child {
  margin-right: 0;
}
.flex-container span,
.flex-container section {
  flex: 1;
}
.flex-container span {
  margin-bottom: 4px;
}

/* General styling */
a {
  text-decoration: none;
}
body {
  background-color: #ccc;
}

/* SVG */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.icon-toolbar {
  width: 1.2em;
  height: 1.2em;
}