JSFiddle - React, Tailwind, and code Playground

by Erick Petrucelli

HTML

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

    <!--
    Uncomment here to test more children.

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

CSS

div.parent {
    height: 28px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #ededed;
    border-radius: 6px;
}

div.parent a {
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    color: #111;
    border: 1px solid #ddd;
    background: #cbcbcb;
    display: block;
    float: left;
    /*
        Percent width only work if I know the number of children.
        But this number changes by the server-side.
    */
    width: 33%;
    border-radius: 6px;
    box-shadow: 1px 1px 3px #dedede;
}

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

JavaScript

/*

JavaScript can do it, but I really would like to solve without it.

var n = $("div.parent a").length;
var w = ($("div.parent").width() / n) - 2;
$("div.parent a").css("width", w + "px");

*/