Formular von Anfänger - Frage zum Styling

[Linus]

Hallo,

ich bin neu hier und generell in der Webseiten-Programmierung.

Ich habe ein Formular erstellt und verstehe nicht, warum das Dropdown und die Text-Felder unterschiedlich hoch sind, obwohl im css ich die selbe Höhe angegeben habe. Könnt ihr mir weiterhelfen? Außerdem würde ich mich generell zu Feedback freuen, was habe ich gut gemacht, was sollte ich anders machen?

 <div class="formular-content">
 
                <form class="formular-container">
                    <div class="formular-line">
                        <div class="formular-item">
                            <label for="auswahl produkt">Wähle ein Produkt</label>
                            <select name="auswahl-produkt" id="auswahl-produkt" class="auswahl-produkt">
 
                                <option value="Hoodie „Green Future“">                              
                                    Hoodie „Green Future“
                                </option>
                                <option value="T-Shirt „Earth Tone“">
                                    "T-Shirt „Earth Tone“
                                </option>
 
                                <option value="Jacket „Recycle Tech“">
                                    "Jacket „Recycle Tech“
                                </option>
                            </select>
 
                        </div>
 
                        <div class="formular-item">
                            <label for="auswahl größe">Größe</label>
                            <select name="auswahl-produkt" id="auswahl-produkt" class="auswahl-produkt">
 
                                <option value="S">
                                    S
                                </option>
                                <option value="M">
                                    M
                                </option>
 
                                <option value="L">
                                    L
                                </option>
 
                                <option value="XL">
                                    XL
                                </option>
                            </select>
                        </div>
 
                    </div>
 
                    <div class="formular-line">
                        <div class="formular-item">
                            <label for="vorname">Vorname</label>
                            <input id="vorname" type="text" name="vorname">
                        </div>
                        <div class="formular-item">
                            <label for="name">Name</label>
                            <input id="name" type="text" name="name">
                        </div>
 
                    </div>
 
                    <div class="formular-line">
                        <div class="formular-item">
                            <label for="email">E-Mail-Adresse</label>
                            <input id="email" type="email" name="email">
                        </div>
                    </div>
 
                    <div class="formular-line">
                        <div class="formular-item">
                            <label for="straße">Straße</label>
                            <input id="strasse" type="text" name="strasse">
                        </div>
                        <div class="formular-item">
                            <label for="straße">Nummer</label>
                            <input id="strasse" type="text" name="strasse">
                        </div>
                    </div>
 
                    <div class="formular-line">
                        <div class="formular-item">
                            <label for="plz">PLZ</label>
                            <input id="plz" type="text" name="plz">
                        </div>
                        <div class="formular-item">
                            <label for="ort">Ort</label>
                            <input id="ort" type="text" name="ort">
                        </div>
                    </div>
 
 
                    <div class="formular-item">
                        <label>Kommentarfeld</h1>
                        <textarea cols="50" rows="10" placeholder="Fragen oder Anregungen..."></textarea>
                    </div>
 
                    <button type="reset">Zurücksetzen</button>
                    <button type="submit">Absenden</button>
                </form>
 
            </div>
 

.formular-item {
  display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}
 
.formular-line {
  display: flex;
  gap: 24px;
  width: 100%;
}
 
.formular-container {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding: 16px;
  margin: 16px;
  border-radius: 16px;
  background-color: grey;
  max-width: 600px;
}
 
.formular-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
 
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: bisque;
  border-radius: 8px;
  box-sizing: border-box;
}
 
 
@media (max-width: 750px) {
 
.formular-line {
  flex-direction: column;
  gap: 8px;
}
}