Refining ui.resizable to provide a reset method

Question

I have a use case where I need to reset the size of a textarea to it's initial size. I started from this solution, which resets when set an option, and arrived at this:

$.widget("ui.resizable", $.ui.resizable, {
    options: {
        origWidth: 0,
        origHeight: 0
    },

    _create: function() {
        this._super();
        this.options.origWidth = $(this.element).width();
        this.options.origHeight = $(this.element).height();
    },

    reset: function() {
        this._resize(
            this.options.origWidth,
            this.options.origHeight
        );
    },

    _resize: function(width, height) {
        width != null && $(this.element).width(width);
        height != null && $(this.element).height(height);
        this._proportionallyResize();
    }
});

I'm using it with this setup:

css

#textarea-resizer { width: 200px; }
#textarea { width: 100%; height: 100%; overflow: auto; resize: none; }

html

<div id="textarea-resizer" style="width: 175px">
  <textarea id="textarea"></textarea>
</div>

<input type="button" id="reset" value="Reset" />

js

$('#textarea-resizer').resizable({
    handles: "se",
    alsoResize: '#textarea',
    minHeight: 23,
    minWidth: 175
});

$('#reset').click(function() {
    $('#textarea-resizer').resizable('reset');
});

(The reason for the "alsoResize" is that the ui.resizable do funny things to textarea elements)

The problem is that pressing the "Reset" button changes the #textarea-resizer, but not the #textarea. How can I make this work correctly? Also, should I do something more to make it fit in well with how the Resizable works?