JSFiddle - React, Tailwind, and code Playground

by jim ulle

CSS

div.inner:nth-child(odd)
{
background: blue;
}
div.inner:nth-child(even)
{
background: green;
}
html, body {
height: 100%;
min-height: 100%;
}
body { position: relative; margin: 0; paddding: 0; }
div.inner { width: 100%; position: relative; }

/* one item */
div.inner:first-child:nth-last-child(1) {
    height: 100%;
}

/* two items */
div.inner:first-child:nth-last-child(2),
div.inner:first-child:nth-last-child(2) ~ div.inner {
    height: 50%;
}

/* three items */
div.inner:first-child:nth-last-child(3),
div.inner:first-child:nth-last-child(3) ~ div.inner {
    height: 33.3333%;
}

/* four items */
div.inner:first-child:nth-last-child(4),
div.inner:first-child:nth-last-child(4) ~ div.inner {
    height: 25%;
}

/* five items */
div.inner:first-child:nth-last-child(5),
div.inner:first-child:nth-last-child(5) ~ div.inner {
    height: 20%;
}

/* six items */
div.inner:first-child:nth-last-child(6),
div.inner:first-child:nth-last-child(6) ~ div.inner {
    height: 16.6667%;
}

/* seven items */
div.inner:first-child:nth-last-child(7),
div.inner:first-child:nth-last-child(7) ~ div.inner {
    height: 14.2857%;
}

/* eight items */
div.inner:first-child:nth-last-child(8),
div.inner:first-child:nth-last-child(8) ~ div.inner {
    height: 12.5%;
}

/* nine items */
div.inner:first-child:nth-last-child(9),
div.inner:first-child:nth-last-child(9) ~ div.inner {
    height: 11.1111%;
}

/* ten items */
div.inner:first-child:nth-last-child(10),
div.inner:first-child:nth-last-child(10) ~ div.inner {
    height: 10%;
}

JavaScript

$(function(){
    //add a random amount of DIV's to the page
    var numDIVs = Math.floor((Math.random() * 10) + 1);
    for (i = 0; i < numDIVs; i++) {
        $('body').append('<div class="inner"></div>');
    }
    //$('div').css("height",(100/$('div').length) + "%");
});