Expanding textarea

<!DOCTYPE html>

<html>
<head>
    <title>Expanding textarea</title>

    <style>
        textarea, pre {
            border: 0;
            margin: 0;
            outline: 0;
            padding: 0;
        }

        .expanding {
            border: 1px solid #666;
            position: relative;
            width: 615px;
        }

        .expanding > pre,
        .expanding > textarea {
            background: transparent;
            min-height: 100px;
            padding: 2px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .expanding > textarea {
            width: 100%;
            height: 100px;
        }

        .expanding > pre {
            display: none;
        }

        .expanding.active > textarea {
            height: 100%;
            left: 0;
            overflow: hidden;
            position: absolute;
            resize: none;
            top: 0;
        }

        .expanding.active > pre {
            display: block;
            visibility: hidden;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript">
        function makeExpanding(cont)
        {
            cont.addClass('active');
            var textarea = cont.children('textarea');
            var span = cont.find('span');

            textarea.bind('input', function(){
                    span.text(textarea.val());
                });

        }
        $(document).ready(function(){
            makeExpanding($('.expanding'));
        });
    </script>

</head>

<body>

<div class="expanding">
    <pre><span></span><br></pre>
    <textarea>dadas</textarea>
</div>

</body>
</html>