title: Align checkbox and label using CSS
body: <p>WooCommerce outputs its checkboxes like this...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="checkbox "&gt;
      &lt;input class="input-checkbox " name="checkbox" id="checkbox" value="1" type="checkbox"&gt;
      Tick This Box
  &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This results in alignment issues...</p>
  
  <p><a href="https://i.stack.imgur.com/fU68V.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/fU68V.jpg" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/IafUQ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/IafUQ.jpg" alt="enter image description here"></a></p>