how to align form information together using flex - html

Question

I need to do this only using flex but I am having some difficulty aligning my labels and input fields properly.This is what the end result is supposed to look like.
Any help would be appreciated!
<form>
<div class="details">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
</div>
<div class="details">
<label for="tel">Telephone Number:</label>
<input type="tel" id="tel" name="tel">
</div>
<div class="details">
<label for="position">Position:</label>
<input type="text" id="position" name="position">
<input type="radio" name="availability" id="Part-Time" value="Part-Time">
<label for="radio">Part-Time</label>
<input type="radio" name="availability" id="Full-Time" value="Full-Time">
<label for="radio">Full-Time</label>
</div>
<div class="details">
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<input type="checkbox" name="AM" id="AM" value="AM">
<label for="checkbox">AM</label>
<input type="checkbox" name="PM" id="PM" value="PM">
<label for="radio">PM</label>
</div>
<div class="details">
<label for="yearsofexperience">Years of Experience:</label>
<input type="text" id="yearsofexperience" name="yearsofexperience">
</div>
<div class="details">
</div>
<div class="details">
<label for="experience">Experience:</label>
<textarea name="experience" id="experience" rows="1" cols="20">Worked 5 years at Bayshore Veterinarian Services</textarea>
</div>
<div class="details">
<input type="submit" value="Apply Now">
</div>
</form>
I have tried all sorts of things but i cannot get them to line up. I have tried having two columns where column 1 contains the labels, while the other column contains the input field but i did not succeed.

Answer 1

I wrote some CSS to create the desired layout. It works without changing the provided HTML.
You can add the missing name input from the image though.
The .details > input:first-child selects the Apply Now button and set a margin-left: calc(25% + 6px), so it has a left space matching the labels and is align with other inputs.
You might as well consider using an actual <button> tag for submit though. If you do so later, you can change this selector to .details > button:first-child.
Hope this will help!
Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
form {
width: 600px;
display: flex;
flex-direction: column;
gap: 9px;
padding: 30px;
}
.details {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px;
}
.details > label:first-child {
width: 25%;
display: flex;
justify-content: flex-end;
}
.details > input#date {
margin-right: 30px;
}
.details > input:first-child {
margin-left: calc(25% + 6px);
padding: 3px 6px;
}
<form>
<div class="details">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
</div>
<div class="details">
<label for="tel">Telephone Number:</label>
<input type="tel" id="tel" name="tel" />
</div>
<div class="details">
<label for="position">Position:</label>
<input type="text" id="position" name="position" />
<input type="radio" name="availability" id="Part-Time" value="Part-Time" />
<label for="radio">Part-Time</label>
<input type="radio" name="availability" id="Full-Time" value="Full-Time" />
<label for="radio">Full-Time</label>
</div>
<div class="details">
<label for="date">Date:</label>
<input type="date" id="date" name="date" />
<input type="checkbox" name="AM" id="AM" value="AM" />
<label for="checkbox">AM</label>
<input type="checkbox" name="PM" id="PM" value="PM" />
<label for="radio">PM</label>
</div>
<div class="details">
<label for="yearsofexperience">Years of Experience:</label>
<input type="text" id="yearsofexperience" name="yearsofexperience" />
</div>
<div class="details"></div>
<div class="details">
<label for="experience">Experience:</label>
<textarea name="experience" id="experience" rows="1" cols="20">
Worked 5 years at Bayshore Veterinarian Services</textarea
>
</div>
<div class="details">
<input type="submit" value="Apply Now" />
</div>
</form>