JSFiddle - React, Tailwind, and code Playground

by LinkinTED

HTML

<div class="box">
    <a href="#">link 1 with a long description</a>
    <a href="#">link 2</a>
    <a href="#">link 3</a>
    <a href="#">link 4</a>
    <a href="#">link 5</a>
</div>

CSS

.box {
    background: lightblue;
    width: 940px;
    box-sizing: border-box;
    padding: 0 40px;
    display: table;
}
.box a {
    display: table-cell;
    text-align: center;
    background: lightgreen;
}
.box a:nth-child(odd) { background: lightpink; }