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

Question

У меня возникла проблема с текстом после флажка. Он не выравнивается должным образом (флажок слишком высок), и поскольку я только начинаю изучать css и кодирование, я не понимаю решения, которые были заданы этой проблеме на других сайтах. Вот образ того, как он выглядит сейчас, и был бы признателен за любую помощь в том, что нужно добавить в пользовательский css, чтобы правильно подобрать ящик. Спасибо! https://www.dropbox.com/s/s46g9bb1u0ymrlf/checkbox.JPG?dl=0

.legal label input[type=checkbox] { 
vertical-align: middle; 
} 

form .form-row .input-checkbox { 
display: inline; 
margin: -2px 8px 0 0; 
text-align: center; 
vertical-align: middle; 
} 

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox],  
.radio input[type=radio], .radio-inline input[type=radio] { 
float: left; 
margin-left: -20px; 
} 

input[type=checkbox], input[type=radio] { 
margin: 4px 0 0; 
margin-top: 1px\9; 
line-height: normal; 


input[type=checkbox], input[type=radio] { 
box-sizing: border-box; 
padding: 0; 
} 

`

Answer 1

Там не может быть в состоянии помочь без кода

<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> 

У меня есть автомобиль

Пожалуйста, проверьте ниже example