Tengo dos columnas que me gustaría cambiar de tamaño (por lo que una se ensancha y la otra se estrecha), pero no estoy muy seguro de cómo hacerlo. He configurado este violín:http://jsfiddle.net/4kyoyazq/

Tengo tres columnas en este momento, con una llamada "manejar" que se encuentra arriba (índice z) de las otras.

//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;
}

Mi directiva está vacía en este momento en el violín: ¿cómo puedo apuntar a los dos divs de columna en la directiva para que si arrastre el controlador div pueda cambiar el ancho de las dos columnas?

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

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