JSFiddle - React, Tailwind, and code Playground

HTML

<span id="opener">Open dialog</span>
<div id="theDialog">
    <span id='contents'>The list just goes on</span><br />
    <span id="addContents">Add contents</span>
</div>
<br>
<br>
<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

#theDialog { display: none; }

JavaScript

$(function() {
    $('#opener').click(function() {
        $('#theDialog').dialog({
            position: {
                'my': 'center',
                'at': 'center'
            }
        });
    });
    
    $('#addContents').click(function() {
        $('#contents').append(' and on and on and on');
        $('#theDialog').dialog({
            position:{
                'my': 'center',
                'at': 'center'
            }
        });
    });
});