JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left" style="width: 20%; border: 1px solid black; float: left;">LEFT</div>

<div id="right" style="display: inline-block;width: 20%; border: 1px solid black">RIGHT</div>

JavaScript

alert ($('#left').height() + ":"+ $('#right').height());
    
function resizeRight() {
    $('#right').height($('#left').height()+20);
}

$('#right').bind('resizeLEvent', function() {resizeRight()});

function resizeLeft() {
    $('#left').height($('#left').height()+30);
    $('#right').trigger('resizeLEvent');
}
                                             
resizeLeft();

alert ($('#left').height() + ":"+ $('#right').height());