html - How can i fix the margin of a label next to a checkbox? -

i have check box have added margin-right:10px little space between them. it's working fine when label have line-break exemple, margin doesn't seem work properly. have check box alone on left , label on right without having under checkbox if have multiple lines.

code

<dd id="rr-element">    <label for="rr-1">       <input type="checkbox" value="1" id="rr-1" name="rr[]">       value 1 lorem lipsum dolor si amet     </label> </dd> 

css

#rr-element{width:180px;} dd label input {    margin-right:10px; } 

little update : max-width of ul or dd 180px; don't want on single line.

try this

html

<dd id="rr-element">     <input value="2" id="rr-1" type="checkbox" name="searchform[position][]">     <label for="rr-1">value 1 lorem lipsum dolor lorem lipsum dolorlorem lipsum dolor</label> </dd> 

css

#rr-element{width:180px; overflow:auto;} dd label {float:right; width:150px; display:inline-block;} dd label input {float:left; margin-right:10px;} 

example