JSFiddle - React, Tailwind, and code Playground

by misterparker

HTML

<div class="container">
    <div class="stretchy-wrap full">
        <div class="inside">
            <div class="stretchy-wrap onethird">
              <div class="inside">Hello</div>
            </div>
            <div class="stretchy-wrap onethird">
              <div class="inside">Hello</div>
            </div>
            <div class="stretchy-wrap onethird">
              <div class="inside">Hello</div>
            </div>
        </div>
    </div>
</div>

CSS

.container {width: 80%;margin: 5% auto;}
.stretchy-wrap {
    background: rgba(0,0,0,.1);
    position: relative;
    /* padding-bottom normally set here, but pulled out for testing */
}
.stretchy-wrap.full {
    width: 100%;
    padding-bottom: 50%; /* calculates as 50% of current element */
}
.stretchy-wrap.onethird {
    width: 31%;
    padding-bottom: 25%; /* calculates as 25% of parent element */
    margin-left: 1.16665%;
    margin-right: 1.16665%;
    float: left;
}
.inside {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.2);
}