Выравнивание флажка и текста рядом с ним

Question

У меня есть флажок, а сообщение рядом с флажком - ong. Когда сообщение складывается, я хочу, чтобы вторая строка сообщения складывалась с первой строкой. Прямо сейчас он выравнивается с флажком. Есть ли способ, которым я могу это сделать?

HTML

<label for="MailingList" class="MailingList"> 
<input type="checkbox" id="MailingList" name="MailingList">Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here. Messsage goes here 
</label> 

CSS:

.MailingList, 
{ 
margin-left: 10px; 
margin-top: 6px; 
font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica"; 
font-size: 14px; 
color: #666; 
font-style: normal; 
text-align: left; 
line-height: 14.4pt; 
letter-spacing: 0em; 
} 

JSFiddle: http://jsfiddle.net/vc8u1rfr/

Есть ли способ, что я могу это исправить? Буду признателен за любую оказанную помощь.

EDIT

Исправленная JsFiddle: http://jsfiddle.net/vc8u1rfr/4/

Answer 1

Если вы установите отступ слева от метки, нажимаешь весь текст (и флажок) немного вправо. Теперь, если вы тянете назад флажок, что такое же количество с отрицательным запасом вы в конечном итоге с желаемым эффектом

label { 
 
    display: block; 
 
    padding-left: 20px; 
 
} 
 
    
 
input[type="checkbox"] { 
 
    margin-left: -20px; 
 
}

<label> 
 
    <input type="checkbox" /> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
</label>

Answer 2

Я предлагаю следующий CSS:

label { 
    position: relative; 
    display: block; 
    padding-left: 50px; /* or whatever */ 
} 
label :first-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 10px; /* or whatever */ 
} 

JS Fiddle demo ,