JSFiddle - React, Tailwind, and code Playground
HTML
<div class="div1 ratio"></div>
<div class="div2 ratio"></div>
<div class="div3 ratio"></div>
CSS
.div1 {width:60%; height:400px; background-color:#066; float:left}
.div2 {width:20%; height:400px; background-color:#09F; float:left;}
.div3 {width:20%; height:400px; background-color:#C00; float:left;}
JavaScript
function update() {
$(".ratio" ).each(function () {
var height = $(this).width();
console.log(height);
$(this).css('height',height + 'px');
});
}
update();
$(window).resize(function() {
update();
});