JSFiddle - React, Tailwind, and code Playground

by carey_zhao

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="resizable" class="ui-widget-content" style="width:300px;height:200px;position:fixed;top:10px;right:10px;">
  <div style="overflow:scroll;height:100%;width:100%;">
  <h3 class="ui-widget-header">Resizable</h3>
      北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司
admin
2014-09-25 17:51:13
北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司北京中软国际信息技术有限公司
    </div>
</div>

CSS

#resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
.ui-resizable-handle {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border: 1px solid #000000;    
}
.ui-resizable-w
{
     left:-50px;
     top:50%;
}

JavaScript

$(function() {
    $( "#resizable" ).resizable({ 
        handles: "w" ,
        resize: function(event, ui) {
            $("#resizable").css("left", "");
        }
     });
      

  });