Twitter Bootstrap - Labels on top of form fields not aligned

Question

I'm trying to create a form with form elements side by side, and their labels (aligned with the beginning of the respective input element) on top of them, like so:

Label                 Label2
+----------------+    +-------+
+----------------+    +-------+

The following doesn't work as expected, because "Label2" is slightly unaligned with the input element:

<div class="controls controls-row">
    <label class="span9"><span>Label</span></label>
    <label class="span2"><span>Label2</span></label>
</div>
<div class="controls controls-row">
    <input type="text" class="span9" />
    <input type="text" class="span2" />
</div>

I got it to work using this workaround-ish structure:

<div class="controls controls-row">
    <div class="span9">
        <label><span>Label</span></label>
    </div>
    <div class="span2">
        <label><span>Label2</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>

So could this be a bug? Because on the Twitter Bootstrap page it says:

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

Here's a JSFiddle that reproduces my problem.

Answer 1

Probably the easiest fix is to remove the whitespace in the HTML between the two inputs:

<input type="text" class="span9" />
<input type="text" class="span2" />

to:

<input type="text" class="span9" /><input type="text" class="span2" />

Answer 2

I managed to do it using grid system:

<div class="row-fluid">
  <div class="span9">
    <label>First name</label>
    <input name="firstName" class="span12" placeholder="First name" type="text">
  </div>
  <div class="span3">
    <label>Last name</label>
    <input name="lastName" class="span12" placeholder="Last name" type="text">
  </div>
</div>