Bootstrap Input-Prepend Height

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="well">
    <!-- This textarea looks fine with the span -->
    <div class="input-prepend">
        <span class="add-on">&nbsp;</span>
        <textarea rows="1" placeholder="test"></textarea>
    </div>
    <!-- This textarea looks ugly with the span -->
    <div class="input-prepend">
        <span class="add-on">&nbsp;</span>
        <textarea rows="8" placeholder="test"></textarea>
    </div>
</div>

CSS

.input-prepend textarea {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

JavaScript

var onRes = function(){
    $('.input-prepend').each(function(){
        var $textarea = $(this).find('textarea');
        var $span = $(this).find('span.add-on:eq(0)');
        console.log($span);
        $span.height($textarea.outerHeight()-(parseInt($span.css('padding-top'))+parseInt($span.css('padding-bottom'))+parseInt($span.css('margin-top'))+parseInt($span.css('margin-bottom'))+(parseInt($span.css('border-width'))*2)));
    });
};

$(window).resize(onRes);
onRes()