html - Keep radio button and label on the same line -

i'm having css issue radio button , label appearing on different lines if label spans multiple lines. here example:

() option () option b ()   option c long   span 2 lines () option d 

see how long lines breaking after radio option? long label-body should span 2 lines, should inline radio option such as:

() option c long    span 2 lines 

here's css

input[type="radio"] {   display: inline;   margin-bottom: 0px; } label > .label-body {   display: inline-block;   margin-left: .5rem;   font-weight: normal; } 

and html

<label>   <input type="radio"> <span class="label-body">option a</span> </label> 

i can't seem figure out why happening. if helps, i'm using skeleton framework (http://getskeleton.com/).

try removing inline-block on span.label-body, if possible. sets span in same line radio button, because default inline.

div {    width: 200px;  }  input[type="radio"] {    display: inline;    margin-bottom: 0px; }  label > .label-body {    margin-left: .5rem;    font-weight: normal;   }  span {    position:absolute;    width: 100px;    left: 30px;  }

<div>    <label>       <input type="radio"><span class="label-body">really long label should span more 1 line because long</span>    </label>  </div>