JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div class="proportions"></div>
    <div class="container">
        <div class="child" id="c1"></div>
        <div class="child" id="c2"></div>
        <div class="child" id="c3"></div>
    </div>
</div>

CSS

div {
    box-sizing: border-box; /* not needed */
}
#parent {
    width: 60%; /* this is random - can be the browser width or fixed pixels, etc */
    border: 1px solid red;
    position: relative; /* capture position: absolute of container */
}
.proportions {
    margin-top: 75%; /* makes parent height to 75% of it's width (4:3)  */
}
.container { /* contents container with 100% width and height of #parent */
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

/* example contents and layouting relative to container width and height */
.child {
    float: left;  
    border: 1px solid black;
}
#c1 {
    width: 66%;
    height: 100%;
}
#c2, #c3 {
    width: 34%;
    height: 50%;
}