JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
<div id="ball" style="left:10px;top:10px;" class="rect-war">
<span id="square-rect"></span>
</div>
</div>

CSS

#parent{
position:absolute;
  top:0;
  left:13px;

  width:300px;
  height:300px;
  z-index: 100;
  border:1px solid;
}
#ball{
  width:100px;
  height:100px;
  position:absolute;
   border:1px solid;

}
#square-rect {
    background-color: red;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0;
    right: 0;
}

JavaScript

var delta_w = 0; // Изменение по ширине
  var delta_h = 0; // Изменение по высоте
  /* После загрузки страницы */

    /* Определяем браузер */

   
    block_r = document.getElementById("square-rect"); // Получаем блок для изменения размеров

    document.onmouseup = clearXY; // Ставим обработку на отпускание кнопки мыши
    block_r.onmousedown = saveWH; // Ставим обработку на нажатие кнопки мыши

  /* Функция для получения текущих координат курсора мыши */
  function getXY(obj_event) {
    if (obj_event) {
      x = obj_event.pageX;
      y = obj_event.pageY;
    }
    else {
      x = window.event.clientX;
      y = window.event.clientY;
      if (ie) {
        y -= 2;
        x -= 2;
      }
    }
    return new Array(x, y);
  }
  function saveWH(obj_event) {
    var point = getXY(obj_event);
    w_block = ball.clientWidth; // Текущая ширина блока
    h_block = ball.clientHeight; // Текущая высота блока
    delta_w = w_block - point[0]; // Измеряем текущую разницу между шириной и x-координатой мыши
    delta_h = h_block - point[1]; // Измеряем текущую разницу между высотой и y-координатой мыши
    /* Ставим обработку движения мыши для разных браузеров */
    document.onmousemove = resizeBlock;
    document.addEventListener("onmousemove", resizeBlock, false);
    return false; // Отключаем стандартную обработку нажатия мыши
  }
  /* Функция для измерения ширины окна */
  function clientWidth() {
    return image.width;
  }
  /* Функция для измерения высоты окна */
  function clientHeight() {
    return image.height;
  }
  /* При отпускании кнопки мыши отключаем обработку движения курсора мыши */
  function clearXY() {
    document.onmousemove = null;
  }
  function resizeBlock(obj_event) {
    var point = getXY(obj_event);
    new_w = delta_w + point[0]; // Изменяем новое приращение по ширине
    new_h = delta_h + point[1]; // Изменяем новое приращение по высоте
    ball.style.width = new_w + "px"; // Устанавливаем новую ширину блока
    ball.style.height =...