JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cross">
    
<div id="horizontal">
    <h3>HORIZONTAL</h3>
    
<div id="vertical">
    <h3>VERTICAL</h3>

    </div>
    
  </div>

</div>

CSS

body {

background-color: gray;
width: 100%;

}


#horizontal { 
    	  position: absolute;
    	  left: 200px;
          top: 200px;
          width: 200px; 
    	  height: 8px; 
          background-color:blue;
    	 }

    #vertical { 
    	position: relative; 
    	left: 100px;
        top:-200px;
        width: 8px; 
    	height: 350px; 
    	background-color: yellow; 
       }


    #horizontal h3, #vertical h3 { 
    	
        text-align: center; 
    	margin: 0; 

    }


.cross {

   position: absolute;
   height: 400px;
   width: 20px;
}

JavaScript

$(document).ready(function () { 
    
      
    $( "#vertical" ).resizable({
            alsoResize: "#horizontal",
            handles: "n , s"       
        });
    
    
    
    $( "#horizontal" ).resizable({
             handles: "w , e"
        }); 
    
    
    });