Keep checkboxes in html table algined

Question

Consider a simple centered aligned table, with some check boxes

Clicking a button will automatically select some check boxes and ADD some dynamic text next to check boxes. Now the check boxes are not aligned any more and the table looks weird.

$('#add').click(function () {
    $('#bike').attr('checked','checked').after("<span>Good Selection</span>");
    $('#airplean').attr('checked','checked').after("<span>Woow</span>");

});

http://jsfiddle.net/m9884jy7/1/

In plain html this can be fixed it by adding extra column....

But Please consider that I have simplified the sample and I can not add column :(

I am looking for css solution, or may be a hint that can be used. Also as I have the id of checkboxes, I could add any html DOM which can help correct alignment.

Answer 1

here you go: http://jsfiddle.net/m9884jy7/2/

first thing you should do, is to add a span near every checkbox, you have - so add an empty one near car:

$('#car').attr('checked','checked').after("<span></span>");

and then add this css, to set a default width to a span:

td span{
    display: inline-block;
    text-align: left;
    width: 200px;
    padding-left:3px;
}

Answer 2

As the OP asked for simple CSS solution

input[type='checkbox'] {
  float: left;
  margin-left: 50%
}
td>span {
  float: left;
}

Demo