index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jQuery UI Resizable - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!-- -------resizable--div------- -->
    <div id="resizable" class="ui-widget-content">
      <h3 class="ui-widget-header">Resizable</h3>
    </div>

    <!-- ---------javascript------------ -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script>
      $(function () {
        $("#resizable").resizable();
      });
    </script>
  </body>
</html>