Edit in JSFiddle

$.fn.textarea = function(){
    function init(){
        var $textarea = $(this).wrap('<div class="textarea"></div>');
        var pre = $('<pre></pre>').html($textarea.val()).insertAfter($textarea);
        $textarea.bind('keyup change click focus',function(e){
            pre.html($textarea.val());
        });
    }
    return this.each(init);
};
$('textarea').textarea();

.textarea{
    width:200px;
    position:relative;
    font-size:12px;
    line-height: 1.5em;
}
.textarea textarea{
    width:100%;
    min-height:100%;
    display:block;
    position:absolute;
    font-size:12px;
    line-height: 1.5em;
    padding: 0px;
    resize: none;
}
.textarea pre{
    display:block;
    min-height: 50px;
    font-size:12px;
    line-height: 1.5em;
    padding-top:1em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

<textarea></textarea>