JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://googledrive.com/host/0B55OYxnBow_9VWpkOUdWLW5KOXM/redactor-9.0.3.js"></script>
<ul>
    <li>Step #1) Resize <strong>DIV</strong></li>
    <li>Step #2) Click `Edit`</li>
    <li>Step #3) Try Step #1</li>    
</ul>

<hr>

<button id="edit">Edit</button>
<button id="save" disabled>Save</button>

<p>
    <div id="resizethis">
        <p>resize me</p>
    </div>
</p>

CSS

ul {
    padding:0;
}
#resizethis{
    border: 1px solid #ddd;
    width: 200px;
}

JavaScript

$(function(){
    var $res = $("#resizethis");
    var $save = $("#save");
    var $edit = $("#edit");

    $res.resizable();

    $edit.on("click", function(){
        $res.resizable("destroy");
        $res.redactor({
            toolbar: false,
            focus: true
        });
        $save.prop("disabled", false);
    });
    
    $save.on("click",function(){
        $res.redactor("destroy");
        $save.prop("disabled", true);
        $res.resizable();
    });
});