Foundation spacing issue

Question

I'm using foundation 5 and trying to put some smaller controls together on one line and having some issues. I'm using offset in the main grid to center the form. That needs to stay the same. The real question is how do I get the 6 controls to look decent together on the same line (3 labels, 3 textboxes)? I'd be very happy with a little extra spacing separating Servings and the Prep and Cook time controls.

Code:

 <div class="row">
    <div class="small-3 large-1 large-offset-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Servings:</span></div>
    <div class="small-2 large-1 columns left"><input type="text" id="servings" name="servings" value="<? echo $servings ?>" /></div>

    <div class="small-7 large-3 columns">
       <div class="row">
         <div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Prep (min):</span></div>
         <div class="small-2 columns"><input type="text" id="prep_min" name="prep_min" value="<? echo $prep_min ?>" /></div>
         <div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Cook (min):</span></div>
         <div class="small-2 columns"><input type="text" id="cook_min" name="cook_min" value="<? echo $cook_min ?>" /></div>
       </div>
    </div>

    <div class="large-4 columns">&nbsp;</div>
 </div>

I've attached a screenshot of how it looks on the page. As you can see it's overlapping.

Answer 1

Remove "right" class and give them some space.