JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea width="300" height="200"> area1 </textarea>
<textarea width="300" height="200"> area2 </textarea>
<textarea width="300" height="200"> area3 </textarea>
JavaScript
jQuery(document).ready(function(){
var $textareas = jQuery('textarea');
// store init (default) state
$textareas.data('x', $textareas.outerWidth());
$textareas.data('y', $textareas.outerHeight());
$textareas.mouseup(function(){
var $this = jQuery(this);
if ( $this.outerWidth() != $this.data('x')
|| $this.outerHeight() != $this.data('y') )
{
// Resize Action Here
$('textarea').height($this.outerHeight());
$('textarea').width($this.outerWidth());
}
// store new height/width
$this.data('x', $this.outerWidth());
$this.data('y', $this.outerHeight());
});
});