Добавьте это правило CSS для label
:
label {
width: 100px;
display: inline-block;
vertical-align: top;
}
(в противном случае метка будет обрабатываться как встроенный элемент. Таким образом, вы дадите ей фиксированную ширину и выровняете ее по верху)
Если вам не нравится выравнивание на самом верху, вы можете добавить padding-top
ike в следующий фрагмент:
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>
´