JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKm18y/AgLs0bLrBqaE4xkb9tGxyhsrxmNj0gm6O41idbjuNDAV7a2GwbNJ" />

</div>

        <div class="demo">

            <textarea name="TextBox1" rows="2" id="TextBox1" cols="20"></textarea>

        </div>

CSS

#TextBox1 { width: 100%; height: 100%; }
.demo
{
    width: 150px;
    height: 150px;
    padding: 5px 10px 20px 4px;
    background-color: #ff8811;
    position: absolute;
    top: 150px;
    left: 300px;
}

#content
{
    padding-bottom: 3em;
}

JavaScript

$('.demo')
    .draggable({ stop: function(event, ui) {
        //get the textarea element and it's coordinates
        var txt = $(this).find('textarea:first');
        var x = txt.offset().left;
        var y = txt.offset().top;
        alert('(' + x + ', ' + y +')');
    } })
    .resizable();