JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
 The goal is to add space to the bottom of one of these labels:
</h3>
<hr />
<input type="checkbox" id="num1" />
<label for="num1">Number 1 label with a bunch of text that should wrap to a new line if we are lucky and the planets align in a syncronous manner which may or may not affect this fiddle in the end of days.</label>
<br /><hr />
<input type="checkbox" id="num2" />
<label for="num2">Number 2 label with a bunch of text that should wrap to a new line if we are lucky and the planets align in a syncronous manner which may or may not affect this fiddle in the end of days.</label>
<br /><hr />
<input type="checkbox" id="num3" />
<label for="num3">Number 3 label with a bunch of text that should wrap to a new line if we are lucky and the planets align in a syncronous manner which may or may not affect this fiddle in the end of days.</label>
<br /><hr />

CSS

#num1 + label { /* this fails because it causes awkward spacing on wrapped text */
  line-height: 2em;
}
#num2 + label { /* this fails because it settles underneath the checkbox */
  display: inline-block;
  padding-bottom: 20px;
}
#num3 + label:after { /* this works because it doesnt change the native inline behavior, but still adds space */
  display: block;
  content: " ";
  padding-bottom: 20px;
}