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>

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>

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.