JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <a href="#">Some</a>
    <a href="#">Other</a>
    <a href="#">Any</a>
    <a href="#">ssss</a>
    <a href="#">Some</a>
    <a href="#">Other</a>
    <a href="#">Any</a>
    <a href="#">ssss</a>

    <!--
    Uncomment here to test more children.

    <a href="#">One More</a>
    <a href="#">Last</a>
    -->
</div>

CSS

div.parent {
    height: 28px;
    padding: 8px 0;
    border: 1px solid #ccc;
    background: #ededed;
    border-radius: 6px;
    
    width: 100%;
    display: table;
    table-layout: fixed;
}

div.parent a {
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    color: #111;
    border: 1px solid #ddd;
    background: #cbcbcb;
    border-radius: 6px;
    box-shadow: 1px 1px 3px #dedede;
    
    display: table-cell;
}

div.parent a:hover {
    color: #fff;
    background: #ee8800;
    border: 1px solid #ffaa11;
    box-shadow: 0 0 2px #ffaa11, 1px 1px 3px #dedede;
}