JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
    <textarea class='editor'></textarea>
   
</div>
<div class="">
    <textarea class='editor'></textarea>
   
</div>

CSS

hr {
    height:10px;
    background-color:black
}
.container {
    height:250px;
}
.editor {
    width:100%;
    height:100%
}
.container > .resizable {
    width:100%;
    height:100%
}

JavaScript

(function ($) {
    $(function () {
        $(".editor")
            .wrap("<div class='resizable'></div>'")
            .parent()
            .append("<hr class='resizer ui-resizable-s'/>");



        $(".resizable").resizable({
            handles: {
                s: $(".resizer").get()
            }
        });
    });
})(jQuery);