JSFiddle - React, Tailwind, and code Playground

by Allendar

HTML

<div id="biggy">
    <div class="smally">Smally :)</div>
    <div class="smally">Smally 2, don't forget me :D</div>
</div>

CSS

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#biggy {
    width: 200px;
    background-color: orange;
    position: relative;
}

.smally {
    width: 100%;
    background-color: blue;
    color: white;
    text-align: center;
    position: absolute;
}

JavaScript

$(document).ready(function() {
    var bh = $('body').height();
    var smally_offset = (bh / 10);
    
    // Set biggy to be the body's height
    $('#biggy').css('height', bh);
    
    // Make all smallies 10% of the set height
    $('.smally').css('height', smally_offset);
    
    // Handle the different smallies :)
    $('.smally:nth-child(1)').css('top', smally_offset * 0);
    $('.smally:nth-child(2)').css('top', smally_offset * 1);
});