how can I make split text in a checkbox label align vertically?

Question

Apologies for the vague title but this is hard to describe. I'm using the span tag to put space between text in checkbox labels, but I'd like both parts of the text to line up vertically. Essentially I want a second space tab. The snippet below correctly shows the blue text as left-aligned. But I also want the red text left aligned. You can see it's a bit jagged right now. Does anyone know how to do this?

 .LHLabelClass { display: inline-block; color: blue; margin-left: 10px; margin-right: 35px; } .RHLabelClass { color: red; } 

 <label><input type="checkbox" name="checkbox" id="First" /> <span class="LHLabelClass">First LH label:</span><span class="RHLabelClass">First RH label</span></label> <br> <label><input type="checkbox" name="checkbox" id="Second"/> <span class="LHLabelClass">Second LH label:</span><span class="RHLabelClass">Second RH label</span></label> <br> <label><input type="checkbox" name="checkbox" id="Third"/> <span class="LHLabelClass">Third LH label:</span><span class="RHLabelClass">Third RH label</span></label> 

Answer 1

Here's my solution with inline-block :

 *{box-sizing: border-box;} .LHLabelClass { color: blue; margin-left: 10px; margin-right: 35px; width: 120px; display: inline-block; } .RHLabelClass { color: red; width: 120px; display: inline-block; } 

 <label> <input type="checkbox" name="checkbox" id="First" /> <span class="LHLabelClass">First LH label:</span> <span class="RHLabelClass">First RH label</span> </label> <br> <label> <input type="checkbox" name="checkbox" id="Second" /> <span class="LHLabelClass">Second LH label:</span> <span class="RHLabelClass">Second RH label</span> </label> <br> <label> <input type="checkbox" name="checkbox" id="Third" /> <span class="LHLabelClass">Third LH label:</span> <span class="RHLabelClass">Third RH label</span> </label> 

Answer 2

If flexbox is an option you can make the label sa flexbox with a set width and then add flex: 1 to the span s - see demo below:

 .LHLabelClass { display: inline-block; color: blue; margin-left: 10px; margin-right: 35px; } .RHLabelClass { color: red; } label { display: flex; width: 300px; } label > * { flex: 1; } label > input[type=checkbox] { flex: initial; } 

 <label> <input type="checkbox" name="checkbox" id="First" /> <span class="LHLabelClass">First LH label:</span><span class="RHLabelClass">First RH label</span> </label> <br> <label> <input type="checkbox" name="checkbox" id="Second" /> <span class="LHLabelClass">Second LH label:</span><span class="RHLabelClass">Second RH label</span> </label> <br> <label> <input type="checkbox" name="checkbox" id="Third" /> <span class="LHLabelClass">Third LH label:</span><span class="RHLabelClass">Third RH label</span> </label> 

Answer 3

You just need to add some alignment classes to your divs, and control how the text is aligned:

 .LHLabelClass { color: blue; } .RHLabelClass { color: red; margin-left: 10px; } .col { float: left; width: 150px; } .left { text-align: left; } 

 <div class="col left"> <input type="checkbox" name="checkbox" id="First" /> <span class="LHLabelClass"> First LH label: </span> <br> <input type="checkbox" name="checkbox" id="Second"/> <span class="LHLabelClass"> Second LH label: </span> <br> <input type="checkbox" name="checkbox" id="Third"/> <span class="LHLabelClass"> Third LH label: </span> </div> <div class="col left"> <span class="RHLabelClass">First RH label</span> <br> <span class="RHLabelClass">Second RH label</span> <br> <span class="RHLabelClass">Third RH label</span> </div>