JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div id = "resizable">
    This is the resizable content...
</div>

<div id="myframe">
    This must resize in reverse direction...
</div>

CSS

#resizable, #myframe {
    border:1px solid black; 
    padding:10px; 
    margin-bottom:20px; 
    width:25%;
    height: 150px;
    float:left;
}
#myframe{
    margin-left: 10px;
    float:left;
}

JavaScript

$(function() {

    $("#resizable").resizable({
        alsoResize: "#myframe"
        handles: 'e'
    });
    $("#myframe").resizable({
        handles: 'w'
    });

});