JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<span>
    <a href="#">aaa </a>
    <a href="#">aa </a>
    <a href="#">a </a>
    </span>
    <a href="#"> center </a>
    <span>
      <a href="#">bbbb </a>
      <a href="#">bbbbb </a>
      <a href="#">bbbbbb </a>
    </span>
</nav>

CSS

nav, nav span {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
a {
padding:0 0.25em;
    border:solid;
}
span {
    flex:2
}
span:first-of-type:after,
span:last-of-type:before{
    content:'';
    display:inline-block;
}
html {
    min-height:100%;
    background:linear-gradient(to bottom, rgba(0,0,0,0.2) 50% ,rgba(0,0,0,0) 50%),linear-gradient(to left, rgba(0,0,0,0.2) 50% ,rgba(0,0,0,0) 50%)
}