Form field alignment issues using flexbox [duplicate] - html

Question

This question already has an answer here:
Input field wrapping using flexbox
(1 answer)
Closed 1 year ago.
PROBLEM:
I'm having some alignment issues with this form.
CODE SNIPPET:
.form-container {
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.verification-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.verification-form .form-group {
display: flex;
flex-direction: row;
margin-bottom: 35px;
width: 100%;
}
.verification-form .form-group:nth-child(3) {
margin-bottom: 5px;
}
.form-group label {
text-align: right;
font-size: 11px;
font-weight: bold;
color: #484343;
margin-left: 10px;
max-width: 150px;
}
.form-group input {
padding: 0px 0px;
margin-left: 20px;
flex: 3;
border: 2px solid #d2d2d2;
border-width: 0 0 2px 0;
transition: border-color 0.3s;
font-size: 18px;
}
#required::after {
content: "*";
color: #f06d41;
font-size: 28px;
}
.form-group input:hover {
border-color: #aa2c2f;
outline: 0;
}
.form-group input:focus {
border-color: #aa2c2f;
outline: 0;
}
input[type="checkbox"] {
width: 28px !important;
height: 28px !important;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
box-shadow: none;
text-align: center;
background: #ffffff;
flex: none;
padding: 0px 0px;
margin-left: 20px;
border: 2px solid #d2d2d2;
border-width: 2px;
transition: border-color 0.3s;
font-size: 18px;
cursor: pointer;
}
input[type="checkbox"]:checked:after {
content: "✔";
color: #aa2c2f;
<div class="form-container">
<div class="verification-form">
<div class="form-group">
<label>FIRST</label>
<input id="firstName" type="" name="firstName" value="" required />
<label>LAST</label>
<input id="lastName" type="" name="lastName" value="" required />
</div>
<div class="form-group" id="required">
<label>EMAIL</label>
<input id="email" type="email" name="email" value="" required />
</div>
<div class="form-group">
<label>PHONE</label>
<input id="phone" type="" name="phone" value="" required />
<label class="sms-label">SMS<br />OPT IN</label>
<input id="sms" type="checkbox" name="sms" value="" required />
</div>
<div class="form-group" id="required">
<label>STREET<br />ADDRESS</label>
<input id="address" type="text" name="address" value="" required />
</div>
<div class="legend">
<p>
<sub>*</sub>Required field
</p>
</div>
</div>
</div>
As you can see, the form looks wonky.
I feel like this is the culprit:
.form-group input {
padding: 0px 0px;
margin-left: 20px;
flex: 3;
border: 2px solid #d2d2d2;
border-width: 0 0 2px 0;
transition: border-color 0.3s;
font-size: 18px;
}
I would like the form to align properly where all fields in a single column are the same size and aligned. I also want the rows with two form fields to be even with rows that have only one field.
I've tried excluding flex:3 with a static width, however, this is not the solution. Would appreciate any help in making this look better.
EDIT: Also open to a solution using CSS grid.

Answer 1

I did some changes in your code. You should use flex for the paten div for the form and if you give witdh:100% to the input fileds it will fit the container of its own. So here the html and css for your form.
Html:
<div class="form-container">
<div class="verification-form">
<div class="form-group" >
<label class="required">FIRST</label>
<input id="firstName" type="" name="firstName" value="" required />
<label class="required">LAST</label>
<input id="lastName" type="" name="lastName" value="" required />
</div>
<div class="form-group" id="required">
<label class="required">EMAIL</label>
<input id="email" type="email" name="email" value="" required />
</div>
<div class="form-group">
<label class="required">PHONE</label>
<input id="phone" type="" name="phone" value="" required />
</div>
<div class="form-group row">
<label class="sms-label required">SMS OPTION</label>
<input id="sms" type="checkbox" name="sms" value="" required />
</div>
<div class="form-group" id="required">
<label class="required" >STREET ADDRESS</label>
<input id="address" type="text" name="address" value="" required />
</div>
<div class="legend">
<p>
<sub class="required"></sub>Required field
</p>
</div>
</div>
</div>
CSS:
.verification-form .form-group:nth-child(3) {
margin-bottom: 5px;
}
.form-group {
display:flex;
flex-direction:column;
text-align:start;
justify-content:flex-start;
max-width:320px;
padding:10px;
}
.form-group.row {
flex-direction:row;
align-items:center;
margin-bottom:10px;
}
.form-group label {
text-align: start;
font-size: 11px;
font-weight: bold;
color: #484343;
margin-left: 20px;
margin-bottom:10px;
max-width: 200px;
}
.form-group input {
width:100%;
padding: 0px 0px;
margin-left: 20px;
flex: 3;
border: 2px solid #d2d2d2;
border-width: 0 0 2px 0;
transition: border-color 0.3s;
font-size: 18px;
margin-bottom:10px;
}
.required::after {
content: "*";
color: #f06d41;
font-size: 16px;
}
.form-group input:hover {
border-color: #aa2c2f;
outline: 0;
}
.form-group input:focus {
border-color: #aa2c2f;
outline: 0;
}
.legend {
margin-left:20px;
}
input[type="checkbox"] {
width: 28px !important;
height: 28px !important;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
box-shadow: none;
text-align: center;
background: #ffffff;
flex: none;
padding: 0px 0px;
margin-left: 20px;
border: 2px solid #d2d2d2;
border-width: 2px;
transition: border-color 0.3s;
font-size: 18px;
cursor: pointer;
}
input[type="checkbox"]:checked:after {
content: "✔";
color: #aa2c2f;}