Align vertically checkboxes with the input fields and labels-CodePudding

I have a form created with react and formik,and the problem is that i can not center elements as shown in the mockup.
It should be this way:

But i have this result:

Could anyone help me please? I dont understand what im doing wrong..
I centered the input but label and checkboxes with radiobuttons arent aligned,i tried :

input[type='checkbox'],
input[type='radio'] {
  display: inline-block;
    vertical-align: baseline;
box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
}

but it's doing nothing,only this works:

input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
  display: block;
  width: 400px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* margin-bottom: 20px; */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

HTML Structure:

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
        <div >
            <form action="#">
                <div >
                    <div >
                        <div ><label for="firstName">First Name</label><input name="firstName" id="firstName"
                                 type="text" placeholder="First Name" value=""></div>
                    </div>
                    <div >
                        <div ><label for="lastName">Last Name</label><input name="lastName" id="lastName"
                                 type="text" placeholder="Last Name" value=""></div>
                    </div>
                    <div >
                        <div ><label for="age">Age</label><input name="age" id="age" 
                                type="text" placeholder="Age" value="" style="border-color: red;"></div>
                        <div >age is a required field</div>
                    </div><label  for="employed">Employed<input type="checkbox" name="employed"
                            label="Employed" id="employment" value="false"></label>
                    <div >
                        <div ><label for="favoriteColor">Favorite Color</label><select name="favoriteColor"
                                id="favoriteColor" >
                                <option value=""></option>
                                <option value="blue">Blue</option>
                                <option value="green">Green</option>
                                <option value="brown">Brown</option>
                                <option value="grey">Grey</option>
                                <option value="red">Red</option>
                                <option value="white">White</option>
                                <option value="pink">Pink</option>
                                <option value="yellow">Yellow</option>
                                <option value="black">Black</option>
                                <option value="beige">Beige</option>
                                <option value="navy blue">Navy blue</option>
                                <option value="maroon">Maroon</option>
                                <option value="purple">Purple</option>
                                <option value="orange">Orange</option>
                                <option value="aqua">Aqua</option>
                            </select></div>
                    </div>
                    <div >
                        <div >
                            <div ><label>Sauces</label>
                                <div >
                                    <div ><input type="checkbox" id="sauces" name="sauces"
                                            value="ketchup"><label for="ketchup">Ketchup</label></div>
                                    <div ><input type="checkbox" id="sauces" name="sauces"
                                            value="mustard"><label for="mustard">Mustard</label></div>
                                    <div ><input type="checkbox" id="sauces" name="sauces"
                                            value="mayonnaise"><label for="mayonnaise">Mayonnaise</label></div>
                                    <div ><input type="checkbox" id="sauces" name="sauces"
                                            value="guacamole"><label for="guacamole">Guacamole</label></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div ><label>Best Stooge</label>
                                <div >
                                    <div ><input type="radio" id="stooge" name="stooge"
                                            value="larry"><label for="larry">Larry</label></div>
                                    <div ><input type="radio" id="stooge" name="stooge"
                                            value="moe"><label for="moe">Moe</label></div>
                                    <div ><input type="radio" id="stooge" name="stooge"
                                            value="curly"><label for="curly">Curly</label></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div >
                        <div ><label for="notes">Notes</label><textarea name="notes" id="notes"
                                 placeholder="Notes" style="border-color: red;"></textarea></div>
                        <div >notes is a required field</div>
                    </div><button type="button"  id="resetButton" disabled="">Reset</button><button
                        type="submit" id="submitButton" disabled="">Submit</button>
                    <div style="margin: 1rem 0px;">
                        <h3 style="font-family: monospace;"></h3>
                        <pre style="background: rgb(246, 248, 250); font-size: 0.65rem; padding: 0.5rem;">{
  "firstName": "",
  "lastName": "",
  "age": "",
  "employed": false,
  "favoriteColor": "",
  "sauces": [],
  "stooge": "",
  "notes": ""
}</pre>
                    </div>
                </div>
            </form>
        </div>
    </div>

</body>

CSS:

<style>.App {
  display: flex;
  justify-content: center;
}
.error {
  color: red;
}

.form-control{
  line-height: 42px
}

input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
  display: block;
  width: 400px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* margin-bottom: 20px; */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
} 

input[type='checkbox'],
input[type='radio'] {
  display: inline-block;
    vertical-align: baseline;
box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
}

.input-field {
 
}

.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.select-field{
  /* padding-right: 20px ; */
}
div.error{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top:-15px;
}

.notes-field{
  
}

.column{
  display: flex;           
  flex-direction: column;  
  justify-content: flex-start; 
}

.checkboxGroup-wrapper{
  display: flex;           /* establish flex container */
  flex-direction: row;  /* make main axis vertical */
}

.checkbox-wrapper{
  /* width: 300px; */
  /* margin: 5px; */
  margin-left: 20px;

}

.radioButtons-column{
  display: flex;           
  flex-direction: column;  
  justify-content: flex-start; 
}

.radioButtonsGroup-wrapper{
  display: flex;           /* establish flex container */
  flex-direction: row;  /* make main axis vertical */
}

.radioButtons-wrapper{
  /* margin-left: 20px; */
}

Thanks in advance!

CodePudding user response：

based on the final result you want to achieve, I think you should give all the labels you have the same width, so the inputs can adjust to the left of these labels.

this is a sample example :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css" type="text/css">
  <title>Document</title>
</head>
<body>
  <div >
    <label >First name</label>
    <input type="text"/>
  </div>
  <div >
    <label >last name</label>
    <input type="text"/>
  </div>
  <div >
    <label  for="favoriteColor">Favorite Color</label>
    <select name="favoriteColor" id="favoriteColor" >
      <option value=""></option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="brown">Brown</option>
    </select>
  </div>
  <div >
       <label >Sauces</label>
        <div >
            <div >
              <input type="checkbox" id="sauces" name="sauces" value="ketchup">
              <label for="ketchup">Ketchup</label>
            </div>
            <div >
              <input type="checkbox" id="sauces" name="sauces"
                    value="mustard">
                    <label for="mustard">Mustard</label>
            </div>
        </div>
  </div>

</body>
</html>

the style :

.field {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
}
.label {
  width: 130px;
  display: inline-block;
}

width that all the labels should be in the left and have the same width, for the buttons you can put them in flex container and center them,