Eu tenho duas colunas que gostaria de redimensionar (onde uma fica mais larga e a outra fica mais estreita), mas não tenho muita certeza de como fazê-lo. Eu configurei este violino:http://jsfiddle.net/4kyoyazq/

Eu tenho três colunas no momento, com uma chamada "alça" que fica acima (z-index) das outras.

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

//right col
#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;
}

Minha diretiva está vazia no momento no violino - como posso direcionar as duas divs da coluna na diretiva para que, se eu arrastar a alça div, eu possa alterar as larguras das duas colunas?

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

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