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

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

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

$(".mini").width(biggest + 1);