保持html表格中的复选框

Question

考虑一个简单的居中对齐表,带有一些复选框

单击按钮将自动选中一些复选框,并在复选框旁边添加一些动态文本.现在复选框不再对齐,表格看起来很奇怪.

$('#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/

在普通的HTML中,可以通过添加额外的列来修复它....

但请考虑我已经简化了样本,我无法添加列:(

我正在寻找css解决方案,或者可能是一个可以使用的提示.另外,由于我有复选框的ID,我可以添加任何可以帮助纠正对齐的html DOM.

Answer 1

由于OP要求简单的CSS解决方案

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

演示