JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog"></div>
<button id="open">Open</button>

JavaScript

var dialog = $('#dialog').dialog({
    autoOpen: false,
    create: function (event, ui) {
        var $button1 = $('#button1');
        console.log("$button1 create", $button1, $button1.outerHeight(), $button1.position().top);
    },
    open: function (event, ui) {
        $.each(buttons, function (i, e) {
            console.log($('#'+e.id).outerHeight())
        });
    },
    buttons: [{
        id: 'button1',
        text: 'Upload',
        click: function () {
            console.log('button1');
        }
    }, {
        id: 'button2',
        text: 'Save',
        click: function () {
            console.log('button2');
        }
    }, {
        text: 'Cancel',
        click: function () {
            $(this).dialog("close");
        }
    }]
});

var buttons = $('#dialog').dialog('option', 'buttons');

$('#open').click(function () {
    dialog.dialog('open');
});