JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
<div style="width: 150px; min-height: 100px;" scrolltop="5" scrollleft="6" id="dialog-me">
    <p>One day I will become a dialog.</p>
</div>

<p>
    <label for="before">Before dialogification</label>
    <textarea id="before"></textarea>
</p>

<p>
    <label for="after">After dialogification and subsequent destruction:</label>
    <textarea id="after"></textarea>
</p>

<p>
    <label for="height">Height property is overriden by inline style (should be 300px):</label>
    <output id="height" />
</p>

CSS

textarea {
    display: block;
    width: 90%;
    height: 100px;
}

#dialog-me {
    height: 300px;
}

p {
    margin: 10px;
}

JavaScript

var dialogEl = document.getElementById("dialog-me");

$("#before").val(dialogEl.outerHTML);

$(dialogEl).dialog().dialog("destroy");

$("#after").val(dialogEl.outerHTML);

$("#height").val($(dialogEl).height());