title: Align vertically checkboxes with the input fields and labels
body: <p>I have a form created with react and formik,and the problem is that i can not center elements as shown in the mockup.<br />
  It should be this way:<br />
  <a href="https://i.stack.imgur.com/FdxMK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FdxMK.png" alt="enter image description here" /></a></p>
  <p>But i have this result:<br />
  <a href="https://i.stack.imgur.com/pbefJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pbefJ.png" alt="enter image description here" /></a></p>
  <p>Could anyone help me please? I dont understand what im doing wrong..<br />
  I centered the input but label and checkboxes with radiobuttons arent aligned,i tried :</p>
  <pre><code>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;
    
  }
  </code></pre>
  <p>but it's doing nothing,only this works:</p>
  <pre><code>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;
  } 
  </code></pre>
  <p><strong>HTML Structure:</strong></p>
  <pre><code>&lt;body&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
      &lt;div id=&quot;root&quot;&gt;
          &lt;div class=&quot;App&quot;&gt;
              &lt;form action=&quot;#&quot;&gt;
                  &lt;div class=&quot;settings&quot;&gt;
                      &lt;div class=&quot;form-control&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;&lt;label for=&quot;firstName&quot;&gt;First Name&lt;/label&gt;&lt;input name=&quot;firstName&quot; id=&quot;firstName&quot;
                                  class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;First Name&quot; value=&quot;&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-control&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;&lt;label for=&quot;lastName&quot;&gt;Last Name&lt;/label&gt;&lt;input name=&quot;lastName&quot; id=&quot;lastName&quot;
                                  class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Last Name&quot; value=&quot;&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-control&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;&lt;label for=&quot;age&quot;&gt;Age&lt;/label&gt;&lt;input name=&quot;age&quot; id=&quot;age&quot; class=&quot;input-field&quot;
                                  type=&quot;text&quot; placeholder=&quot;Age&quot; value=&quot;&quot; style=&quot;border-color: red;&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;error&quot;&gt;age is a required field&lt;/div&gt;
                      &lt;/div&gt;&lt;label class=&quot;checkbox&quot; for=&quot;employed&quot;&gt;Employed&lt;input type=&quot;checkbox&quot; name=&quot;employed&quot;
                              label=&quot;Employed&quot; id=&quot;employment&quot; value=&quot;false&quot;&gt;&lt;/label&gt;
                      &lt;div class=&quot;form-control&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;&lt;label for=&quot;favoriteColor&quot;&gt;Favorite Color&lt;/label&gt;&lt;select name=&quot;favoriteColor&quot;
                                  id=&quot;favoriteColor&quot; class=&quot;select-field&quot;&gt;
                                  &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
                                  &lt;option value=&quot;blue&quot;&gt;Blue&lt;/option&gt;
                                  &lt;option value=&quot;green&quot;&gt;Green&lt;/option&gt;
                                  &lt;option value=&quot;brown&quot;&gt;Brown&lt;/option&gt;
                                  &lt;option value=&quot;grey&quot;&gt;Grey&lt;/option&gt;
                                  &lt;option value=&quot;red&quot;&gt;Red&lt;/option&gt;
                                  &lt;option value=&quot;white&quot;&gt;White&lt;/option&gt;
                                  &lt;option value=&quot;pink&quot;&gt;Pink&lt;/option&gt;
                                  &lt;option value=&quot;yellow&quot;&gt;Yellow&lt;/option&gt;
                                  &lt;option value=&quot;black&quot;&gt;Black&lt;/option&gt;
                                  &lt;option value=&quot;beige&quot;&gt;Beige&lt;/option&gt;
                                  &lt;option value=&quot;navy blue&quot;&gt;Navy blue&lt;/option&gt;
                                  &lt;option value=&quot;maroon&quot;&gt;Maroon&lt;/option&gt;
                                  &lt;option value=&quot;purple&quot;&gt;Purple&lt;/option&gt;
                                  &lt;option value=&quot;orange&quot;&gt;Orange&lt;/option&gt;
                                  &lt;option value=&quot;aqua&quot;&gt;Aqua&lt;/option&gt;
                              &lt;/select&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-control&quot;&gt;
                          &lt;div class=&quot;column&quot;&gt;
                              &lt;div class=&quot;checkboxGroup-wrapper&quot;&gt;&lt;label&gt;Sauces&lt;/label&gt;
                                  &lt;div class=&quot;checkbox-wrapper&quot;&gt;
                                      &lt;div class=&quot;checkboxes&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;sauces&quot; name=&quot;sauces&quot;
                                              value=&quot;ketchup&quot;&gt;&lt;label for=&quot;ketchup&quot;&gt;Ketchup&lt;/label&gt;&lt;/div&gt;
                                      &lt;div class=&quot;checkboxes&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;sauces&quot; name=&quot;sauces&quot;
                                              value=&quot;mustard&quot;&gt;&lt;label for=&quot;mustard&quot;&gt;Mustard&lt;/label&gt;&lt;/div&gt;
                                      &lt;div class=&quot;checkboxes&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;sauces&quot; name=&quot;sauces&quot;
                                              value=&quot;mayonnaise&quot;&gt;&lt;label for=&quot;mayonnaise&quot;&gt;Mayonnaise&lt;/label&gt;&lt;/div&gt;
                                      &lt;div class=&quot;checkboxes&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;sauces&quot; name=&quot;sauces&quot;
                                              value=&quot;guacamole&quot;&gt;&lt;label for=&quot;guacamole&quot;&gt;Guacamole&lt;/label&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-control&quot;&gt;
                          &lt;div class=&quot;radioButtons-column&quot;&gt;
                              &lt;div class=&quot;radioButtonsGroup-wrapper&quot;&gt;&lt;label&gt;Best Stooge&lt;/label&gt;
                                  &lt;div class=&quot;radioButtons-wrapper&quot;&gt;
                                      &lt;div class=&quot;radioButtons&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;stooge&quot; name=&quot;stooge&quot;
                                              value=&quot;larry&quot;&gt;&lt;label for=&quot;larry&quot;&gt;Larry&lt;/label&gt;&lt;/div&gt;
                                      &lt;div class=&quot;radioButtons&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;stooge&quot; name=&quot;stooge&quot;
                                              value=&quot;moe&quot;&gt;&lt;label for=&quot;moe&quot;&gt;Moe&lt;/label&gt;&lt;/div&gt;
                                      &lt;div class=&quot;radioButtons&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;stooge&quot; name=&quot;stooge&quot;
                                              value=&quot;curly&quot;&gt;&lt;label for=&quot;curly&quot;&gt;Curly&lt;/label&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-control&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;&lt;label for=&quot;notes&quot;&gt;Notes&lt;/label&gt;&lt;textarea name=&quot;notes&quot; id=&quot;notes&quot;
                                  class=&quot;notes-field&quot; placeholder=&quot;Notes&quot; style=&quot;border-color: red;&quot;&gt;&lt;/textarea&gt;&lt;/div&gt;
                          &lt;div class=&quot;error&quot;&gt;notes is a required field&lt;/div&gt;
                      &lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;button&quot; id=&quot;resetButton&quot; disabled=&quot;&quot;&gt;Reset&lt;/button&gt;&lt;button
                          type=&quot;submit&quot; id=&quot;submitButton&quot; disabled=&quot;&quot;&gt;Submit&lt;/button&gt;
                      &lt;div style=&quot;margin: 1rem 0px;&quot;&gt;
                          &lt;h3 style=&quot;font-family: monospace;&quot;&gt;&lt;/h3&gt;
                          &lt;pre style=&quot;background: rgb(246, 248, 250); font-size: 0.65rem; padding: 0.5rem;&quot;&gt;{
    &quot;firstName&quot;: &quot;&quot;,
    &quot;lastName&quot;: &quot;&quot;,
    &quot;age&quot;: &quot;&quot;,
    &quot;employed&quot;: false,
    &quot;favoriteColor&quot;: &quot;&quot;,
    &quot;sauces&quot;: [],
    &quot;stooge&quot;: &quot;&quot;,
    &quot;notes&quot;: &quot;&quot;
  }&lt;/pre&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>&lt;style&gt;.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; */
  }
  </code></pre>
  <p>Thanks in advance!</p>