Question

I have markup like

<div> <label for="a" class="float-left">column 1 row 1</label> <input type="text" value="column 2 row 1" id="a"  class="float-left"/>

<div class="float-clear"></div>

<div> <label for="b" class="float-left">longer column 1 row 2</label> <input class="float-left" type="text" value="column 2 row 2" id="b" />   

<div class="float-clear"></div>

<div> <label class="float-left" for="c">column 1 row 2</label> <input class="float-left" type="checkbox" id="c" />

How can I make column two rows to be aligned on the left, currently they are positioned depending on the length of the the text in the label? I don’t want a full CSS grid just for this one place where I need alignment.

Answer 1

If you just want it this one place, you can do it with margin-left.

Another answer is to make your labels inline-block elements and give them all a set width.