JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tar" style="width: 300px; height: 300px; background: #e3e3e3">

</div>

<div id="info"></div>

JavaScript

$(function() {

    var beginX, beginY, endX, endY, width, height;

    $('#tar').selectable({

      start: function(e) {
        var posX = $(this).position().left, posY = $(this).position().top;

        beginX = e.pageX - posX;
        beginY = e.pageY - posY;

      },

      stop: function(e) {
        var posX = $(this).offset().left, posY = $(this).offset().top;

        endX = e.pageX - posX;
        endY = e.pageY - posY;

        if(beginX > endX) { var tmp = beginX; beginX = endX; endX = tmp; }
        if(beginY > endY) { var tmp = beginY; beginY = endY; endY = tmp; }

        width = endX - beginX;
        height = endY - beginY;

        $(this).append('<div id="demo"></div>');
        $('#demo').css({
          'position': 'relative',
          'width': width,
          'height': height,
          'left': beginX,
          'top': beginY,
          'background': '#000000'
        });
      }
    });
  });