JSFiddle - React, Tailwind, and code Playground

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea><br/>
 <input type="button" id="button" value="Add Div with Text"/><br/>

<div>
    <div class="middle-side"></div>
</div>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

CSS

.middle-side {
	width: 500px;
    height: 500px;
    border: 2px solid;
}


.draggable { 
 	width: 150px; 
 	height: 150px; 
 	padding: 0.5em; 
 	background:#FFFFDD;
 }

JavaScript

$('#button').click(function(e) {
    $('<div class="draggable" class="ui-widget-content"></div>').draggable({ containment: "parent" }).appendTo('.middle-side');
    $('textarea').val().appendTo('.draggable');
});