JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
  <li class="item">
    <a href="#">Home</a>
  </li>
  <li class="item">
    <a href="#">Nějaký název submenu</a>
  </li>
  <li class="item">
    <a href="#">Nějaký strašně dlouhý název submenu</a>
  </li>
  <li class="item">
    <a href="#">Nějaký název submenu</a>
  </li>
  <li class="item">
    <a href="#">Nějaký název submenu</a>
  </li>
  <li class="item">
    <a href="#">Nějaký název submenu</a>
  </li>
  <li class="item">
    <a href="#">Nějaký název submenu</a>
  </li>
  <li class="item">
    <a href="#">Nějaký název submenu</a>
  </li>
  </li>

CSS

#menu {
  display:flex;
  flex-flow: nowrap;
  flex: 1 1 auto;
  width: 100%;
  align-items: stretch;
  margin: 0;
  padding:0
}
#menu li {
 list-style:none;
  position: relative;
  display: flex;
  align-content: center;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-flow: column;
}
#menu li a {
  padding: 0.5em;
  line-height: 1.5em;
  background: red;
  border: 1px solid white;
  color: white;
  text-decoration: none;
  display: flex;
  flex: 1 1 auto;
}
#menu li a span {
  align-self : center;   
}

JavaScript

$('a').wrapInner('<span>');