JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<div id="body_div"  style="display:none;" >
    <div>Send To: <span id='sendto'></span></div>
    <div>Subject: <span id='subject'></span></div>
    <div>Content: <div id='content'></div></div>
</div>

<br /><br /><input type="button" value="SEND ME SOME MAIL" onclick="spit_it_out('test message','[email protected]')" />

CSS

#content {
    width: 100%;
    height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
}
#content p {
    word-wrap: break-word;
}
#body_div {
    width: 100px;
}

JavaScript

function spit_it_out($sbj, $who2) {
    alert('sp1');
    $('#sendto').html($who2);
    alert('sp2');
    $('#subject').html($sbj);
    $('#body_div').dialog({ 
        modal: true,
        height: '500',
        width: '70%',
        buttons: {
            "Ok": function() {
                $(this).dialog('close');
            }
        }
    });
}

$(function() {
    alert('f1');
    var a = [];
    while (a.length < 1978) {
        a.push('A');
    }
    $('#content').html('<p>'+a.join('')+'</p>');
});