how to align checkbox with Label using HTML CSS (Should work in all browser)?

 If you want to go with above HTML code only, i.e. means html would be without wrapping label text, your HTML /CSS code to align checkbox with Label properly can be

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] {
  bottom: 2px;
}

<label>
  <input type="checkbox">
  Label text
</label>

Fiddle Example here

Another simple Inline CSS code would be

<input type="checkbox" />
<label style="font-size: 16px;position: relative;top: -2px;">This is the label</label>

Using bottom property and veritcal align in CSS, we can align checkbox

.font2, .font2 input {font-family:Arial; font-size:32px} /* sample large fonts */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is helpful */
}

and considering HTML

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form><label><input type="checkbox" /> Simple text</label> 

<p class="font2">
  <label><input type="checkbox"/> Large Label text</label>
</p>

You can check fiddle here: https://jsfiddle.net/zdwjr068/

This should also work, thanks