How to make input elements line up? - html

Question

my form I'm working on the Free Code Camp Product Landing page Project. I'm close to finishing, and one of the last things I want to add is a 2 column form. I've lined up the label elements, but it looks really ugly as the input elements are not lined up and I can't think of a way to position them in the way that I want.
``HTML
<!-- Order Section -->
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<label class="order-box">Product Name
<input>
</label>
<label class="order-box">Quantity
<input>
</label>
<label class="order-box">First Name
<input>
</label>
<label class="order-box">Last Name
<input>
</label>
<label class="order-box">E-mail
<input>
</label class="order-box">
<label>Phone Number
<input>
</label>
<label class="order-box">Street Address
<input>
</label>
</form>
</section>
</div>
<!-- End Order Section -->
/* Order Section */
#order-wrapper{
background-color: rgba(245, 202, 195, 1);
height: 40rem;
}
#order-form{
width: 100%;
}
#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;
}
#order-form input{
width: 60%;
margin-left: 5%;
}
#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;
}
/* End Order Section */

Answer 1

Not sure if this is the style you were going for, you can use tables.
HTML
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Email</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>
I just moved everything into a table, so by default it should line everything up. You may need to tweak the css style further. If you want
something closer to what you had before you can also try splitting things
up into two tables, so that you can have two columns beside each other instead of one column for everything.
Here is an example with two tables:
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
</table>
<table>
<tr>
<td><label class="order-box">Email</label></td>
<td> <input> </td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Something Else..</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>
My CSS:
#order-form{
width: 100%;
}
#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;
}
#order-form input{
width: 60%;
margin-left: 5%;
}
#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;
}
table {
position: relative;
display: inline-block;
}