JSFiddle - React, Tailwind, and code Playground

by reggi

HTML

<div class="container">
    <div class="mini">New Jersy</div>
    <div class="mini">New York</div>
    <div class="mini">Vermont</div>
    <div class="mini">California</div>
    <div class="mini">Texas</div>
    <div class="mini">South Carolina</div>
    <div class="mini">Washington</div>
    <div class="mini">Florida</div>
    <div class="mini">Oregon</div>
    <div class="mini">North Carolina</div>
    <div class="mini">New Hampshire</div>
    <div class="mini">Nevada</div>
</div>

CSS

.container{
    float:left;
    display:inline;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 50%;
}

.mini{
    float:left;
    display:inline;
    background-color:#cccccc;
    padding:2px;
    margin:2px;
    text-align:center;
}

JavaScript

$.fn.createAlike = function() {
        var containerChildern = $(this + " > div").size() + 1;
        var childrenWidth = new Array();
        childrenWidth[0] = 0;
        for (i = 1; i < containerChildern; i++) {
            childrenWidth[i] = $(this + " div:nth-child(" + i + ")").width();
        };

        var biggest = 0;
        for (x = 0; x < childrenWidth.length; x++) {
            if (childrenWidth[x] > biggest) {
                biggest = parseInt(childrenWidth[x]); //right here
            }
        }
        var junk =
        parseInt($(this + " div").css("padding-right")) + 
        parseInt($(this + " div").css("padding-left")) + 
        parseInt($(this + "  div").css("margin-right")) + 
        parseInt($(this + " div").css("margin-left"));

        $(this).width(biggest + junk + 1);
        var marginleft = $(this).width() / 2;
        $(this).css("margin-left", "-" + marginleft + "px");

        $(this + " div").width(biggest + 1);
    };



$(".container").createAlike();