Align checkbox and label using CSS

Question

WooCommerce outputs its checkboxes like this...

<label class="checkbox ">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    Tick This Box
</label>

This results in alignment issues...

I can fix them by editing the way checkboxes are output but before I do, is there a simpler way with CSS to get them to look like this?

Answer 1

You can place checkbox with position: absolute.

.checkbox {
  display: inline-block;
  vertical-align: top;
  padding-left: 25px;
  position: relative;
}

.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
}

<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    Tick This Box
</label>
<label class="checkbox">
    <input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox">
    This is a multi line label with a lot of text. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet...
</label>