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

function chooseContainer(container) {
    var containerChildern = $(container + " > div").size() + 1;
    var childrenWidth = new Array();
    childrenWidth[0] = 0;
    for (i = 1; i < containerChildern; i++) {
        childrenWidth[i] = $(container + " 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($(container + " div").css("padding-right")) + 
    parseInt($(container + " div").css("padding-left")) +
    parseInt($(container + " div").css("margin-right")) + 
    parseInt($(container + " div").css("margin-left"));

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

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

chooseContainer(".container")