JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<fieldset>
<legend>Normal Behavior</legend>
<p><input type="checkbox" id="chk_1_1" value="true" />
    <label for="chk_1_1">This is a checkbox in a list of checkboxes. If you're OCD like me, you'll want the text to line up nicely next to the textboxes.</label></p>
<p><input type="checkbox" id="chk_1_2" value="true" />
    <label for="chk_1_2">This is a checkbox in a list of checkboxes. If you're OCD like me, you'll want the text to line up nicely next to the textboxes.</label></p>
<p><input type="checkbox" id="chk_1_3" value="true" />
    <label for="chk_1_3">This is a checkbox in a list of checkboxes. If you're OCD like me, you'll want the text to line up nicely next to the textboxes.</label></p>
</fieldset>
    <br />
<fieldset>
<legend>Better Behavior</legend>
<p class="hangingIndent"><input type="checkbox" id="chk_2_1" value="true" />
    <label for="chk_2_1">
    <span>This is a checkbox in a list of checkboxes. If you're OCD like me, you'll want the text to line up nicely next to the textboxes.</span>
    </label></p>
<p class="hangingIndent"><input type="checkbox" id="chk_2_2" value="true" />
    <label for="chk_2_2">This is a checkbox in a list of checkboxes. If you're OCD like me, you'll want the text to line up nicely next to the textboxes.</label></p>
<p class="hangingIndent"><input type="checkbox" id="chk_2_3" value="true" />
    <label for="chk_2_3">This is a checkbox in a list of checkboxes. If you're OCD like me, you'll want the text to line up nicely next to the textboxes.</label></p>
</fieldset>
</div>

CSS

* { font-family: tahoma, verdana, sans-serif; }
#container { margin: 10px; }
p { padding-bottom: 5px; }
fieldset { border: solid 1px #cccccc; padding: 5px; }
.hangingIndent { text-indent: -24px; padding-left: 24px; }