How to align input boxes in a column using Zurb foundation - css

Question

I am a newbie to Zurb Foundation and I am trying to align the input elements (second div with class="large-9 columns")inline.
But they are being stacked one over the other inspite of using the class="columns".
How can i get them arranged inline?
http://jsfiddle.net/Sbt75/432/
Case 1:
<div class="row">
<div class="large-3 columns">
Prefix:
</div>
<div class="large-9 columns">
<label>
<input type="radio" name="PrefixTab" value="Mr.">Mr.</label>
<label>
<input type="radio" name="PrefixTab" value="Mrs.">
Mrs.</label>
<label>
<input type="radio" name="PrefixTab" value="Ms.">
Ms.</label>
</div>
</div>
Case 2:
<div class="row">
<div class="large-3 columns">
<label for="BirthMonthTab" ">* Birth Date:</label>
</div>
<div class="large-9 columns">
<input type="text" id="BirthMonthTab" name="BirthMonthTab" maxlength="2" />/
<input type="text" id="BirthDayTab" name="BirthDayTab" maxlength="2" />/
<input type="text" id="BirthYearTab" name="BirthYearTab" maxlength="4" />
(mm/dd/yyyy)
</div>
</div>

Answer 1

For case 1 you could change the radio buttons against a <select> field. But for both cases, you may also try something like:
<div class="row">
<div class="large-3 columns">
<label class="inline right" for="BirthMonthTab">* Birth Date:</label>
</div>
<div class="large-3 columns">
<input type="text" id="BirthMonthTab" placeholder="dd" name="BirthMonthTab" maxlength="2" />
</div>
<div class="large-3 columns">
<input type="text" id="BirthDayTab" placeholder="mm" name="BirthDayTab" maxlength="2" />
</div>
<div class="large-3 columns">
<input type="text" id="BirthYearTab" placeholder="yyyy" name="BirthYearTab" maxlength="4" />
</div>
</div>
Here is a demo with your jsFiddle: http://jsfiddle.net/Sbt75/433/ (Remember to make the preview area bigger, or the columns will be stacked)