JSFiddle - React, Tailwind, and code Playground

by Leonidas Mosquera

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="row">
<div id="demo"></div><span id="res1">20</span>
</div>
<div class="row">
<div id="demo2"></div><span id="res2">20</span>
</div>

CSS

body {
  padding: 50px;
}

.row{
  padding:20px;  
}

#demo {
  display: block;
  width: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #F00;
  left: 100px;
  text-align:center;
  color:#FFF
}

#demo2 {
  display: block;
  width: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #000;
  left: 100px;
  text-align:center;
  color:#FFF
}

JavaScript

$(document).ready(function() {

  $("#demo").resizable({
    handles: 'e',
    grid: [40, 0],
    minWidth: 20,
    maxWidth:100,
    stop:function( event, ui ) {
      $('#res1').text($(this).width());
    }
  });
  
  $("#demo2").resizable({
    handles: 'w',
    grid: [40, 0],
    minWidth: 20,
    maxWidth:100,
    stop:function( event, ui ) {
      $('#res2').text($(this).width());
    }
  });

});