JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog">
    <div id="content">
        When you click me, my dialog will resize and all will be right!<br><br>
        But if you click me after having resized the dialog, my width will not auto-change anymore :( so i'm sad.</div><br>
        <div id="empty-container"></div>
</div>

CSS

#dialog {
    padding: 0px;
}
#empty-container { height: 100px; width:10px; border: 1px solid yellow }
#content {
    width: 100%;
    color:white;
    background: red;
}
.ui-dialog .ui-dialog-content {
    background : #cacaca;
}

JavaScript

$("#dialog").dialog();

$("#content").click(function () {

    $("#dialog").dialog("widget").children(".ui-dialog-content").animate({
        left: 0,
        top: 0,
        width: 300,
        height: 200
    }, 150);
      $("#dialog").dialog("widget").animate({
        left: 0,
        top: 0,
        width: 300,
        height: 200
    }, 150);

});

/* Steps to reproduce:
 * * * * * * * * * * * * * * * *
 * Click the red content. the dialog resizes.
 * Resize it manually. It behaves good.
 * Click again. It's not working anymore.
*/