Aligning form input elements of varying lengths - html

Question

I need to create a form using only HTML and CSS. The form fields are of different lengths depending on which field it is.
I've tried just about every solution I've found on SO and other sites that use things like display modes but those all seem to be aimed at forms where all the input fields are the same size. I've also tried to use a table to make the form but I don't know enough about them to make that work. I am still open to using a table if anyone is willing to teach me how to have it work.
form {
margin-top: 25px;
}
.form {
margin-left: 10px;
background-color: #fff;
float: left;
width: 620px;
}
.form p {
margin-left: 10px;
}
.form h3,
.summary h3 {
font-size: 36px;
background-color: #fff;
width: auto;
padding-top: 35px;
}
.form label {
font-family: Arial, sans-serif;
font-size: 14px;
display: block;
margin-left: 10px;
color: #8f8f8f;
}
input {
float: left;
margin-left: 10px;
background-color: #f9f9f9;
border: 1px solid #cdcdcd;
height: 36px;
border-radius: 2px;
}
.form span {
color: #861919;
}
.name {
width: 288px;
}
.bigbar {
width: 448px;
}
.smallbar {
width: 128px;
}
<form action="#" method="POST">
<label for="firstname">First Name <span>*</span></label>
<input type="text" id="firstname" required class="name" />
<label for="lastname">Last Name <span>*</span></label>
<input type="text" id="lastname" required class="name" />
<label for="address">Street Address <span>*</span></label>
<input type="text" id="address" required class="bigbar" />
<label for="apt">Apt/Unit/Suite #</label>
<input type="text" id="apt" class="smallbar" />
<label for="city">City <span>*</span></label>
<input type="text" id="city" required class="bigbar" />
<label for="province">Province <span>*</span></label>
<input type="text" id="province" required class="smallbar" />
<label for="code">Postal Code <span>*</span></label>
<input type="text" id="code" required class="smallbar" />
<label for="phone">Phone Number <span>*</span></label>
<input type="tel" id="phone" required class="bigbar" />
<button type="submit" id="submit">Continue Checkout</button>
</form>
At the end it's supposed to look like this: https://puu.sh/DQhyH/2aed3ce204.png
but as far as I'm able to get it with my knowledge it looks like this: https://puu.sh/DQhAs/eb0a1eeb5b.png (can't post images due to just making my account)
so it's almost there but the fields aren't aligned properly.

Answer 1

This could be done fairly easy with a table using colspan attribute on td elements. However, tables are intended for the display of data, and should be not used for layout (this article lists several reasons why).
You need to look at your desired result and form a grid with containing div elements. You have several "rows", so put the content of each row inside a div.row that takes the full width. Your content within the rows is either 1,2, or 3 "columns" wide out of 4 total. So you make div.col1, div.col2, div.col3 with appropriate widths and inline-block display. Then just make sure you put four columns in each row. The containing divs now determine the widths so we set inputs and labels to width:100% to take the full width of their respective parents.
div.field {
display: inline-block;
padding: .5em;
}
div.row,
input,
label,
button {
width: 100%;
}
form {
margin-top: 25px;
width: 620px;
}
form label {
font-family: Arial, sans-serif;
font-size: 14px;
display: block;
margin-left: 10px;
color: #8f8f8f;
}
input {
/*float: left;*/
margin-left: 10px;
background-color: #f9f9f9;
border: 1px solid #cdcdcd;
height: 36px;
border-radius: 2px;
}
form span {
color: #861919;
}
.col2 {
width: 288px;
}
.col3 {
width: 448px;
}
.col1 {
width: 128px;
}
<form action="#" method="POST">
<div class="row">
<div class="col2 field">
<label for="firstname">First Name <span>*</span></label>
<input type="text" id="firstname" required/>
</div>
<div class="col2 field">
<label for="lastname">Last Name <span>*</span></label>
<input type="text" id="lastname" required/>
</div>
</div>
<div class="row">
<div class="col3 field">
<label for="address">Street Address <span>*</span></label>
<input type="text" id="address" required class="bigbar" />
</div>
<div class="col1 field">
<label for="apt">Apt/Unit/Suite #</label>
<input type="text" id="apt" />
</div>
</div>
<div class="row">
<div class="col3 field">
<label for="city">City <span>*</span></label>
<input type="text" id="city" required/>
</div>
<div class="col1 field">
<label for="province">Province <span>*</span></label>
<input type="text" id="province" required/>
</div>
</div>
<div class="row">
<div class="col1 field">
<label for="code">Postal Code <span>*</span></label>
<input type="text" id="code" required/>
</div>
<div class="col3 field">
<label for="phone">Phone Number <span>*</span></label>
<input type="tel" id="phone" required/>
</div>
</div>
<div class="row">
<div class="col1 field"></div>
<div class="col2 field">
<button type="submit" id="submit">Continue Checkout</button>
</div>
<div class="col1 field"></div>
</div>
</form>