Q:

Изменение размера элемента (div) мышкой

С помощью собственного плагина JQuery "resizable" и класса элемента с таким названием нужно поместить вниз этого элемента Селектор. Содержимое этого элемента должно быть также внутри при изменении размера.
Небольшой пример и что в нём неправильно:

Содержимое остаётся за элементом, а не внутри при уменьшении высоты элемента.

Не селектор уменьшает элемент, а сам элемент работает как селектор.

Песочница

A:

Разобрался

$(document).ready(function() {
    $(".resizable").resizable();
});

(function($) {

 var defaults = {
  color: 'red'
 };
 
 var f = {
 
  init: function(options) {
   var options = $.extend({}, defaults, options);
   
   var c = this;
            var qe = $("<div class='res'><div class='resizers'></div><div class='resizers'></div></div>");
            $(c).append(qe);
   $(".res").css({
    "height":  '7px',
    // "background": options.color,
    "cursor":  's-resize'
   });
   
   return this.each(function() {
    var me = $(this);
   
    qe.bind('mousedown', function(e) {
     var h = me.height();
     var y = e.clientY;
     
     var moveHandler = function(e) {
      var s = Math.max(20, e.clientY + h - y);
      me.height(s);
      return false;
     };
     
     var upHandler = function(e) {
      $('html').unbind('mousemove', moveHandler).unbind('mouseup', upHandler);
     };
     
     $('html').bind('mousemove', moveHandler).bind('mouseup', upHandler);
    });
   });
  },
 };
 
 
 $.fn.resizable = function(method) {
  if(f[method]) {
   return f[method].apply(this, Array.prototype.slice.call(arguments, 1));
  } else if(typeof method === 'object' || ! method) {
   return f.init.apply(this, arguments);
  } else {
   $.error("ћетод с именем " + method + " не существует");
  }
  
  
 };

}) (jQuery);
#a {
    background: #CD0000;
    width: 256px;
    height: 512px;
    padding: 4px 5px 4px 5px;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.b {
    background: #CDCD00;
    width: 100%;
    height: 128px;
    margin-bottom: 5px;
}

.res {
    background: #CD00CD;
    top: 0;
}

.resizers {
 margin: 0 auto;
 margin-bottom: 2px;
 width: 26px;
 height: 1px;
 background: #DCDCDC;
}
<div id="a" class="resizable">
    <div class="wrapper">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
</div>

