how to align form information together using flex-CodePudding

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 >
                                <label for="email">E-mail:</label>
                                <input type="email" id="email" name="email">
                            </div>
                            <div >
                            <label for="tel">Telephone Number:</label>
                            <input type="tel" id="tel" name="tel">
                            </div>
                            <div >
                                <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 >
                                <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 >
                                <label for="yearsofexperience">Years of Experience:</label>
                                <input type="text" id="yearsofexperience" name="yearsofexperience">
                            </div>
                            <div >

                            </div>
                            <div >
                                <label for="experience">Experience:</label>  
                                <textarea name="experience" id="experience" rows="1" cols="20">Worked 5 years at Bayshore Veterinarian Services</textarea>
                            </div>
                            <div >
                                <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.

CodePudding user response：

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 >
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" />
  </div>
  <div >
    <label for="tel">Telephone Number:</label>
    <input type="tel" id="tel" name="tel" />
  </div>
  <div >
    <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 >
    <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 >
    <label for="yearsofexperience">Years of Experience:</label>
    <input type="text" id="yearsofexperience" name="yearsofexperience" />
  </div>
  <div ></div>
  <div >
    <label for="experience">Experience:</label>
    <textarea name="experience" id="experience" rows="1" cols="20">
Worked 5 years at Bayshore Veterinarian Services</textarea
    >
  </div>
  <div >
    <input type="submit" value="Apply Now" />
  </div>
</form>