JSFiddle - React, Tailwind, and code Playground

by Lindow

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="elements">
  <div class='element text' style="width:200px;transform: translate3d(20px, 30px ,0px);">
    <div class="inner-text">sss ss I'mfdgfdg <span style="font-size:40px;">fdgdddddddddddddddddddfgfdgtryin</span> sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div>
  </div>
  <div class='element text' style="width:300px;transform: translate3d(20px, 210px ,0px)">
    <div class="inner-text">sss ss I'mfdgf sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div>
  </div>
</div>

<div id="handles_manager">
  <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
  <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
</div>

CSS

.element {
  min-height: 30px;
  position: absolute;
}

.element .inner-text {
  word-break: break-all;
}

#egrip,
#wgrip {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

#wgrip {
  left: -7px;
  top: 50%;
}

#egrip {
  right: -7px;
  top: 50%;
}

#handles_manager {
  min-height: 5px;
  visibility: hidden;
  padding:5px 10px;
  border: 2px dotted #ccc;
}

JavaScript

$('#handles_manager').resizable({
  handles: {
    'e': '#egrip',
    'w': '#wgrip'
  }
});

function showHandles(e) {
  move = $(this);
  var width = $(this).width();
  var height = $(this).height();
  var pos_left = $(this).position().left;
  var post_top = $(this).position().top;
  
  $('#handles_manager').css({
  	'height': height,
    'width': width,
    'transform': 'translate3d(' + pos_left + 'px, ' + post_top + 'px, 0px)',
    'visibility': 'visible',
    'top': '-13px',
    'left': '-20px',
  });

  $('#handles_manager').resize(function(e) {
    var handles_height = move.height();
    var handles_width = $('#handles_manager').width();
    var str_height = String(handles_height) + 'px';
    var str_width = String(handles_width) + 'px';
    var pos_grip_left = $('#wgrip').offset().left;
		var pos_grip_top = $('#handles_manager').position().top;
    
    $(this).css({
      'height': str_height,
    });
    
    move.css({
      'width': str_width,
      'transform': 'translate3d(' + (pos_grip_left + 9) + 'px,' + (pos_grip_top - 3) + 'px, 0px)',
    });
  });
  
  
}

var texts = document.getElementsByClassName('text');
for (var i = 0; i < texts.length; i++) {
  var text = texts[i];
  text.addEventListener('click', showHandles);
}