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 {
    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>');
    //maintain ratio
    set_1x1_ratio($('#fixed_ratio'));
});