JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test #1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="container-fluid">

        <div class="row-fluid">
            <form class="well">
                <legend>Not working</legend>
                <p>As you can see, the "Bar" label is not aligned with the input element below it.</p>
                <div class="controls controls-row">
                    <label class="span9"><span>Foo</span></label>
                    <label class="span2"><span>Bar</span></label>
                </div>
                <div class="controls controls-row">
                    <input type="text" class="span9" />
                    <input type="text" class="span2" />
                </div>
            </form>
        </div>

        <div class="row-fluid">
            <form class="well">
                <legend>Workaround</legend>
                <p>It works when wrapping the form elements, but that creates a lot of superfluous DIVs.</p>
                <div class="controls controls-row">
                    <div class="span9">
                        <label><span>Foo</span></label>
                    </div>
                    <div class="span2">
                        <label><span>Bar</span></label>
                    </div>
                </div>
                <div class="controls controls-row">
                    <div class="span9">
                        <input type="text" class="span12" />
                    </div>
                    <div class="span2">
                        <input type="text" class="span12" />
                    </div>
                </div>
            </form>
        </div>

    </div>
</body>
</html>