JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixed_ratio">
    <p>Some text</p>
    <p>And a list</p>
    <ul id="dyn">
        <li>Foo</li>
    </ul>
</div>

<button id='add'>Add dynamic content</button>

CSS

#fixed_ratio {
    background-color:#ddd;
    float: left;
}

#add, #rat {
    float: right;
}

JavaScript

function set_1x1_ratio(el){
    //set auto size
    el.width('');
    el.height('');
    var max = Math.max(el.width(), el.height());
    el.width(max);
    el.height(max);
}

set_1x1_ratio($('#fixed_ratio'));

$('#add').click(function(){
    $('#dyn').append('<li>bar</li>');
});

 
// create an observer instance
var observer = new MutationObserver(function() {
   set_1x1_ratio($('#fixed_ratio'));
});
 
// configuration of the observer:
var config = { subtree: true, characterData: true, childList: true };
 
// pass in the target node, as well as the observer options
observer.observe($('#fixed_ratio').get(0), config);