How do I move the City, State and Zipcode inputs up where they should be? I have been messing around with the rows and the end, pull, push and offset classes but i guess i haven't found the right combination. Any help will be great. Thanks!
My Modal HTML:
<a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">Customers</a>
<div id="customerModal" class="reveal-modal" data-reveal>
<h3>Customers</h3>
<form>
<div class="row">
<div class="large-6 columns">
<label>Business Name
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
<div class="large-6 columns">
<label>Contact Name
<input type="text" placeholder="Enter Contact Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Business Phone
<input type="email" placeholder="Enter Business Phone Number" />
</label>
</div>
<div class="large-6 columns">
<label>Contact Phone
<input type="text" placeholder="Enter Contact Phone Number" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Address 1
<input type="text" placeholder="Enter Address" />
</label>
</div>
<div class="large-6 columns">
<label>Contact Email
<input type="text" placeholder="Enter Contact Email" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Address 2
<input type="text" placeholder="Enter Address" />
</label>
</div>
<div class="large-6 columns">
<label>Notes
<textarea placeholder="Enter Optional Notes" rows="10"></textarea>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns end">
<label>City
<input type="text" placeholder="Enter City" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>State
<select>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Zipcode
<input type="text" placeholder="Enter zipcode">
</label>
</div>
</div>
<input type="submit" class="add-btn button right small" value="Add">
<a class="close-reveal-modal">×</a><!--Close Button-->
</form>
</div><!--Modal-->
One solution would be to create giant columns. So the entire left side is one column and the entire right side is one column.
(Heads up don't blindly copy and paste, I removed some fields to save time.)
To elaborate a little you are creating a dynamically sized row for both "notes" and "address". You need to split them up into different containers so they don't share the same height. I find I need to visualize this every once and awhile and to do so you can open your page in chrome and right click and go to inspect element, then when you highlight over the code you can see what rows and columns contain what elements with nifty little colored boxes.