How do i vertically align html forms? [duplicate] - html

Question

This question already has answers here:
Align labels in form next to input
(8 answers)
Closed 11 months ago.
I've just started to delve into forms. To my understanding so far is that everything that is inside the form tags align horizontally by default, which rises the question:
How do i make my form inputs/items align vertically?
This is the code a simple example:
<form action="contact.html" method="GET">
<div>
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div>
<label for="lname">Lastname</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>
By making divs the labels and input started to be on top of eachother instead of next to eachother, which is exactly what i want. But obviously it looks very sloppy with the textareas. They are like glued together, and doesn't match perfectly at all in position.
Any ideas how i can fix this in CSS?
Best regards!
UPDATE
Clarification: You see how the input areas are completely off. I want those to be EXACTLY perfectly even and matched, so it doesn't look as scuffed as it does currently.
UPDATE 2: Fix
I figured it out. Now it's all even and vertical (Though im not saying this is best or the perfect solution, but it solved my current beginner issue/question).
CSS:
form {
width: 10%;
}
UPDATE 3
Proper solution in the answer feed by Nick Vu. Thread closed.

Answer 1

You can apply a display: flex; to the form element.
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: left;
}
input {
display: inline-block;
float: left;
}
<form action="contact.html" method="GET">
<div>
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div>
<label for="lname">Lastname</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>

Answer 2

I think you're looking for a table display that is row-aligned and column-aligned with content
form {
display: table;
}
div {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
<form action="contact.html" method="GET">
<div class="flexbox">
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div class="flexbox">
<label for="lname">Lastname Testing</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>