JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div id="content">
        This is the content
    </div>
    
    <div id="menu">
        This is the menu
    </div>
    
    <div id="handle" draggable>
        
    </div>
</div>

CSS

#content {
  position:absolute;
  left:0;
  right:250px;
  bottom:30px;
  top:50px;
  background:red;
  z-index:0;
  overflow-y:scroll;
}

#menu {
  position:absolute;
  right:0;
  top:50px;
  width:250px;
  bottom:30px;
  background:#yellow;
}

#handle {
  position:absolute;
  right:250px;
  top:50px;
  width:10px;
  bottom:30px;
  background:blue;
  cursor: col-resize;
  z-index:5;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive("draggable", function(){
	return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              element.on('click', function () {
                  //do something here
              });
          }
      };
});