How do I vertically align the input field in a form? - html

Question

Hi,
How do I align the input field such that they start on the same vertical line? Is there a CSS method I can use instead of manually editing each input field?
This is the html code:
<form id="survey-form">
<div id="form-group">
<label for="name" id="name-label"> Name: </label>
<input type="text" id="name" name="name" placeholder="full name" required></input><br>
</div>
<div id="form-group">
<label for="email" id="email-label"> Email: </label>
<input type="email" id="email" name="email" placeholder="validated email" required></input><br>
</div>
<div id="form-group">
<label for="number" id="number-label"> Contact: </label>
<input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number"></input><br>
</div>
</form>
For CSS, I currently only have:
input {
margin-bottom: 15px;
width: 10%;
}
I was wondering how I can code it in CSS such that the text input fields align? For example, if I use padding the text fields will still not aligned as the length of the label differs.

Answer 1

Firstly, you don't need to close your input as </input>.
Also, in the last input, you forgot your <div id="form-group">.
Now, the idea to make all the input align is simply to make all your labels as an inline-block element with a specific width. That way, it will push out all the input and align them after the width ends.
input {
margin-bottom: 15px;
width: 10%;
}
#form-group label {
display: inline-block;
width: 60px;
}
<form id="survey-form">
<div id="form-group">
<label for="name" id="name-label"> Name: </label>
<input type="text" id="name" name="name" placeholder="full name" required><br>
</div>
<div id="form-group">
<label for="email" id="email-label"> Email: </label>
<input type="email" id="email" name="email" placeholder="validated email" required><br>
</div>
<div id="form-group">
<label for="number" id="number-label"> Contact: </label>
<input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number">
</div>
</form>

Answer 2

Use flex property to align the label and input box
#form-group{
display:flex;
align-items:center;
margin-bottom:20px;
}
#form-group label{
flex:1;
flex-basis:20%;
max-width:20%;
}
#form-group input {
flex:2;
flex-basis:20%;
max-width:20%;
}
Working Demo
#form-group{
display:flex;
align-items:center;
margin-bottom:20px;
}
#form-group label{
flex:1;
flex-basis:20%;
max-width:20%;
}
#form-group input {
flex:2;
flex-basis:20%;
max-width:20%;
}
<form id="survey-form">
<div id="form-group">
<label for="name" id="name-label"> Name: </label>
<input type="text" id="name" name="name" placeholder="full name" required>
</div>
<div id="form-group">
<label for="email" id="email-label"> Email: </label>
<input type="email" id="email" name="email" placeholder="validated email" required>
</div>
<div id="form-group">
<label for="number" id="number-label"> Contact: </label>
<input type="number" id="number" name="contact" min="00000000" max="99999999" placeholder="phone number">
</div>
</form>