этикетки перекрывается в таблице

Question

У меня есть проблема с этикетками, которые содержатся в таблице, как вы можете видеть на картинке:

Как может строка таблицы соответствует содержанию этикетки автоматически?

<table class="table"> 
    <tr> 
    <td> 
     <input type="radio" name="radio_1" id="radio_1_2" data-type="1" data-value="2" class="css-checkbox"> 
     <label for="radio_1_2" class="css-label radGroup1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</label> 
    </td> 
    </tr> 
</table> 

UPDATE: Это мой CSS для этикеток и радио-кнопки:

input[type=radio].css-checkbox { 
    position:absolute; 
    z-index:-1000; 
    left:-1000px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; width:1px; 
    margin:-1px; 
    padding:0; 
    border:0; 
} 

input[type=radio].css-checkbox + label.css-label { 
    padding-left:21px; 
    height:16px; 
    display:inline-block; 
    line-height:16px; 
    background-repeat:no-repeat; 
    background-position: 0 0; 
    font-size:16px; 
    vertical-align:middle; 
    cursor:pointer; 

} 

input[type=radio].css-checkbox:checked + label.css-label { 
    background-position: 0 -16px; 
} 
label.css-label { 
    background-image:url(../img/radio_button.png); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Answer 1

Я только что посмотрел снова, и теперь я нашел проблему. Я удалил атрибут vertical-align, и он отлично работает.

Мой новый CSS теперь это:

input[type=radio].css-checkbox { 
    position:absolute; 
    z-index:-1000; 
    left:-1000px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; width:1px; 
    margin:-1px; 
    padding:0; 
    border:0; 
} 

input[type=radio].css-checkbox + label.css-label { 
    padding-left:21px; 
    height:16px; 
    display:inline-block; 
    line-height:16px; 
    background-repeat:no-repeat; 
    background-position: 0 0; 
    font-size:16px; 
    /*vertical-align:middle;*/ 
    cursor:pointer; 

} 

input[type=radio].css-checkbox:checked + label.css-label { 
    background-position: 0 -16px; 
} 
label.css-label { 
    background-image:url(../img/radio_button.png); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Answer 2

do that if you want to like this output 
<table class="table table-responsive table-condensed table-striped"> 
    <tr> 
    <td> 
     <input type="radio" name="radio_1" id="radio_1_2" data-type="1" data-value="2" class="css-checkbox"> 
    </td> 
    <td> 
     <label for="radio_1_2" class="css-label radGroup1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</label> 
    </td> 
     <td> 
     <input type="radio" name="radio_1" id="radio_1_2" data-type="1" data-value="2" class="css-checkbox"> 
     </td> 
     <td> 
     <label for="radio_1_2" class="css-label radGroup1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</label> 
    </td> 
    </tr> 
</table>