<form>
<div class="form-group">
<div class="row">
<div class="col col-3">
<label class="block">Shirt Details</label>
<p class="note">Select the shirt details you'd like to purchase.</p>
</div>
<div class="col col-9">
<div class="row">
<div class="col col-3">
<label class="sub block text-right" for="shirt-type">Shirt Type</label>
</div>
<div class="col col-9">
<select class="input" id="shirt-type">
<option selected></option>
<option>T-Shirt</option>
<option>Baseball T-Shirt</option>
<option>Tank Shirt</option>
</select>
</div>
</div>
<div class="row">
<div class="col col-3">
<label class="sub block text-right" for="shirt-size">Shirt Size</label>
</div>
<div class="col col-9">
<select class="input" id="shirt-size">
<option selected></option>
<option>X-Small</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X-Large</option>
</select>
</div>
</div>
<div class="row">
<div class="col col-3">
<label class="sub block text-right" for="shirt-color">Shirt Color</label>
</div>
<div class="col col-9">
<select class="input" id="shirt-color">
<option selected></option>
<option>Blue</option>
<option>Red</option>
<option>Green</option>
<option>Black</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-3">
<label>Your Details</label>
<p class="note">We need to know some stuff about you.</p>
</div>
<div class="col col-9">
<div class="input-group">
<label class="sub">Full Name</label>
<div class="row">
<div class="col col-6">
<input type="text" class="input" placeholder="First Name">
</div>
<div class="col col-6">
<input type="text" class="input" placeholder="Last Name">
</div>
</div>
</div>
<div class="input-group">
<label class="sub" for="input-email">Email Address</label>
<input type="email" class="input" id="input-email" placeholder="example@gmail.com">
</div>
<div class="input-group">
<label class="sub">Shipping Address</label>
<input type="text" class="input" placeholder="Street Address">
</div>
<div class="input-group">
<input type="text" class="input" placeholder="Address Line 2">
</div>
<div class="row">
<div class="col col-4">
<input type="text" class="input" placeholder="City">
</div>
<div class="col col-4">
<input type="text" class="input" placeholder="State">
</div>
<div class="col col-4">
<input type="text" class="input" placeholder="Zip">
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-3">
<label class="block">Other Details</label>
</div>
<div class="col col-9">
<div class="row">
<div class="col col-6">
<label class="choice"><input type="checkbox"> Is this item a gift?</label>
</div>
<div class="col col-6">
<label class="choice"><input type="checkbox"> Create an Account</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-9 prefix-3">
<button class="button primary">Proceed to Checkout</button>
</div>
</div>
</div>
</form>
form .form-group {
padding: 20px;
background: rgba($black, 0.05);
box-shadow: 0 1px 1px rgba($white, 0.5), inset 0 1px 2px rgba($black, 0.05);
@include border-radius();
}