Handle twitter boostrap div resize gracefully with jquery

Question

Im using Twitter Bootstrap for my row\col layout on my web forms. I have a checkbox on the screen that will show\hide a row, and using jquery I have this nice simple animation to fade the row in\out. The problem is, after the fade out completes, all other rows "jump". Is there any chaining I can do in jQuery to softly handle the div resize? Or, perhaps there's something different I can do with my markup?

Code is here, along with a fiddle showcasing my problem, thanks in advance for any help!

<input type="checkbox" id="chk1" checked="checked" class="checkbox" style="padding-left: 0px;" />Do something
<div class="container">
     <legend>Stuff</legend>
    <div class="well">
        <div class="row">
            <div class="span6">
                <div class="row">
                        <div class="row-fluid">
                            <div class="span3 offset1 text-right">
                                <label>Something:</label>
                            </div>
                            <div class="span6">
                                <label>Lorem</label>
                            </div>
                        </div>
                    </div>
                    <div class="row option">
                        <div class="row-fluid">
                  <div class="span3 offset1 text-right">
                                <label>Something:</label>
                            </div>
                            <div class="span6">
                                <label>Ipsum</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="row-fluid">
                            <div class="span3 offset1 text-right">
                                <label>Something:</label>
                            </div>
                            <div class="span6">
                                <label>Dolor</label>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
</div>

And here's my jquery:

$(document).ready(function () {
$('#chk1').click(function () {           
    if (this.checked) {
        $('.option').fadeIn();         
            }
            else {
                $('.option').fadeOut(); 
            }
        });
    });

Answer 1

One way to go about it would be to animate it's height to 0 then hiding it, and on checked show it then animate it back to it's original height.

$(document).ready(function () {
    $('#chk1').click(function () {
        if (this.checked) {
            $('.option').show().animate({
                height: 20
            }, 300);

        } else {
            $('.option').animate({
                height: 0
            }, 300, function () {
                $(this).hide();
            });
        }
    });

});

Fiddle