Align inputs and textarea with labels vertically even - html

Question

I want to create this form in css
HTML
<div class="contact__right">
<form action="" class="contact__form">
<div>
<label for="name" class="contact__form-label">Name</label>
<input type="text" id="name" class="contact__form-input">
</div>
<div>
<label for="email" class="contact__form-label">Email</label>
<input type="text" id="email" class="contact__form-input">
</div>
<div>
<label for="phone" class="contact__form-label">Phone</label>
<input type="text" id="phone" class="contact__form-input">
</div>
<div>
<label for="message" class="contact__form-label">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
</div>
</form>
</div>
CSS
.contact {
&__form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 105px 95px;
color: $white;
}
&__form-input,
&__form-textarea {
width: 300px;
height: 40px;
background: transparent;
border: 1px solid white;
border-radius: 2px;
margin-bottom: 25px;
}
&__form-textarea {
height: 150px;
}
&__form-label {
padding-right: 70px;
}
}
What I'm struggling with is alignment of inputs with labels and of textarea at the same line vertically.
textarea always sticks out at the side, because of its label which has longer text than the rest.
All the help will be appreciated.

Answer 1

I would not use a flexbox for the form, but for each <div> inside the form. The labels are vertically centered for each input field, except for the textarea. There the label is vertically aligned at the top. You can play with top padding there when desired.
* {
box-sizing: border-box;
}
.contact__right {
background-color: gray;
}
.contact__form {
padding: 105px 95px;
width: 100%;
color: white;
}
.contact__form>div {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.contact__form-input,
.contact__form-textarea {
width: 300px;
height: 40px;
background: transparent;
border: 1px solid white;
border-radius: 2px;
}
.contact__form-textarea {
height: 150px;
}
label[for="message"].contact__form-label {
align-self: flex-start;
}
<div class="contact__right">
<form action="" class="contact__form">
<div>
<label for="name" class="contact__form-label">Name</label>
<input type="text" id="name" class="contact__form-input">
</div>
<div>
<label for="email" class="contact__form-label">Email</label>
<input type="text" id="email" class="contact__form-input">
</div>
<div>
<label for="phone" class="contact__form-label">Phone</label>
<input type="text" id="phone" class="contact__form-input">
</div>
<div>
<label for="message" class="contact__form-label">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
</div>
</form>
</div>

Answer 2

Add following css code and your problem will be solved.
.contact__form-label {
vertical-align: top;}

Answer 3

Add this CSS rule for label:
label {
width: 100px;
display: inline-block;
vertical-align: top;
}
(otherwise label will be treated as an inline-element. This way you give it a fixed width and align it to the top)
If you don't like the alignment at the very top, you can add a padding-top ike in the following snippet:
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 105px 95px;
color: $white;
}
input,
textarea {
width: 300px;
height: 40px;
background: transparent;
border: 1px solid white;
border-radius: 2px;
margin-bottom: 25px;
}
textarea {
height: 150px;
}
label {
width: 100px;
display: inline-block;
vertical-align: top;
padding-top: 14px;
}
.contact__right {
background: #ccc;
}
<div class="contact__right">
<form action="" class="contact__form">
<div>
<label for="name" class="contact__form-label">Name</label>
<input type="text" id="name" class="contact__form-input">
</div>
<div>
<label for="email" class="contact__form-label">Email</label>
<input type="text" id="email" class="contact__form-input">
</div>
<div>
<label for="phone" class="contact__form-label">Phone</label>
<input type="text" id="phone" class="contact__form-input">
</div>
<div>
<label for="message" class="contact__form-label">Message</label>
<textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
</div>
</form>
</div>
´

Answer 4

You are gonna have to do that manually I guess. Normally websites tend to break line after the labels and bring the input fields to the next line.