JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color: red;">
    <div id="myContainer" style="background-color: lightgray;margin:1em;padding:1em">
    
        <span id="widthResult">Hello world!!!</span>
    </div>
</div>

CSS

iframe.width-changed {
    width: 100%;
    display: block;
    border: 0;
    height: 0;
    margin: 0;
}

JavaScript

$.event.special.widthChanged = {
        remove: function() {
            $(this).children('iframe.width-changed').remove();
        },
        add: function () {
            var elm = $(this);
            var iframe = elm.children('iframe.width-changed');
            if (!iframe.length) {
                iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
            }
            var oldWidth = elm.width();
            function elmResized() {
                var width = elm.width();
                if (oldWidth != width) {
                    elm.trigger('widthChanged', [width, oldWidth]);
                    oldWidth = width;
                }
            }

            var timer = 0;
            var ielm = iframe[0];
            (ielm.contentWindow || ielm).onresize = function() {
                clearTimeout(timer);
                timer = setTimeout(elmResized, 20);
            };
        }
    }


$('#myContainer').on('widthChanged',function(){
    $('#widthResult').text('Width changed to ' + $(this).width());
});