JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
    <div class="drag-handle"></div>
    <textarea style=" width:98px; height:48px;margin:0;padding:0;" name="text" id="text">Some text</textarea>
</div>

CSS

div {
    float: left;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    border:3px solid;
}
.drag-handle {
    width: 100%;
    height: 5px;
    background-color: #C00;
    cursor: move;
}

JavaScript

$(function () {
    $('.drag-item').draggable({
        snap: true,
        cursor: "move",
        delay: 100,
        scroll: false,
        cancel: "text",
        containment: "parent",
        handle: '.drag-handle',
        drag: function (e, ui) {
            //some code
        }
    }).resizable({
        containment: "parent",
        stop: function (e, ui) {
            var width = ui.size.width;
            var height = ui.size.height;
            var hereDrag = this;

            if ($(hereDrag).find('textarea').length > 0) {
                $(hereDrag).find('textarea').css('width', width - 10);
                $(hereDrag).find('textarea').css('height', height - 10);
            }
        },
        resize: function (e, ui) {
            //some code
        }
    })

});