jQuery resizable elements, add pading instead of height

Question

Is it possible to do something like this. I want to be able to resize elements only N/S using resizable plugin, but instead of applying height to en element, I want to apply padding.

My current setup is:

<div id="container">
  <div class="wrapper"><div class="inner"><p>Text goes here"></p></div></div>
  <div class="wrapper"><div class="inner"><p>Text goes here"></p></div></div>
  <div class="wrapper"><div class="inner"><p>Text goes here"></p></div></div>
</div>


$("#container p").resizable({
    handles: "n, s",
    resize: function(event, ui) {
        var padding = ((ui.size.height - ui.originalSize.height) / 2);
        ui.element.css({
            'height': 'initial',
            'padding-top': padding + 'px',
            'padding-bottom': padding + 'px'
        });
    }
});

The problem is that I can only resize last "p" element, not the first or the middle one. Why is that?