Checkbox not aligning despite CSS code applied - html

Question

I am trying to get my checkboxes and labels aligned (into two a column), but it isn't working. Any idea what I can do to get it fixed?
Jsfiddle here: http://jsfiddle.net/wfju61oq/1/
.option label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
.option input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}

Answer 1

Try this:
.option label {
display: block;
width: 220px;
}
.option input {
float:right;
}
Working fiddle here.

Answer 2

label {
display: block;
width: 300px;
text-align: right;
margin-right: 10px;
}
Here is a working JSFiddle:
http://jsfiddle.net/wfju61oq/8/
Warning: you have a &character in one of your id: this is incorrect.

Answer 3

demo - http://jsfiddle.net/victor_007/wfju61oq/10/
remove margin:0 for label and position:relative; top:-1px;
added border for better view of vertical alignment
.option label {
display: block;
padding-left: 15px;
text-indent: -15px;
width: 150px;
border: 1px solid red;
}
.option input {
width: 13px;
height: 13px;
vertical-align: bottom;
*overflow: hidden;
float: right;
}
<div class="option">
<fieldset>
<legend>Which Service Do You Require?</legend>
<label for="Hostess">Hostess
<input type="checkbox" id="Hostess" value="Hostess" />
</label>
<label for="usher">Usher
<input type="checkbox" id="usher" value="usher" />
</label>
<label for="welcomeguests">Welcome Guests
<input type="checkbox" id="welcomeguests" value="welcomeguests" />
</label>
<label for="guestlists">Guest Lists
<input type="checkbox" id="guestlists" value="guestlists" />
</label>
<label for="seatguests">Seat Guests
<input type="checkbox" id="seatguests" value="seatguests" />
</label>
<label for="servebuffmeal">Serve Buffet Meal
<input type="checkbox" id="servebuffmeal" value="servebuffmeal" />
</label>
<label for="servesitmeal">Serve Sit-Down Meal
<input type="checkbox" id="servesitmeal" value="servesitmeal" />
</label>
<label for="clearplates">Clear Plates
<input type="checkbox" id="clearplates" value="clearplates" />
</label>
<label for="cleartables">Clear Tables
<input type="checkbox" id="cleartables" value="cleartables" />
</label>
<label for="returnhplates">Return Hired Plates
<input type="checkbox" id="returnhplates" value="returnhplates" />
</label>
<label for="refilljuggs">Refill Jugs
<input type="checkbox" id="refilljugs" value="refilljuggs" />
</label>
<label for="">Serve V.I.P Guests
<input type="checkbox" id="servevipguests" value="servevipguests" />
</label>
<label for="">Cross-Check Invite List
<input type="checkbox" id="crosscheckivlist" value="crosscheckivlist" />
</label>
<label for="">Meet & Greet Guests
<input type="checkbox" id="Meet&GreetGuests" value="Meet&GreetGuests" />
</label>
<div style="clear: both"></div>
<label>Other
<input id="other" name="other" type="text" placeholder="Other" />
</label>
</fieldset>
</div>