css - How put an element more close to a html label -

i need create element (div or span) more closer label created input field. problem label width seems related input field width therefore, if add div after html label, element created @ end of space occupied input box. question is: how can move div element more closer label text without using fixed position coordinates?

with code obtain like:

example label         xx ======================== ======================== 

i need like:

example label  xx ====================== ====================== 

that current code:

html:

<div style="float:left;">     <div id="spinner" style="float: right; visibility: visible;">xx</div>     <label for="text_sample">example text</label>     <label>     <input type="text" id="input_sample" name="xxxx" value="" style="width:180px" />         </label>  </div> 

css:

label{     display: block;     } 

for convenience i've created fiddler demo:

thank you

html:

<div style="float:left;">     <label for="text_sample" class="left">example text</label>     <div id="spinner" class="left">xx</div>     <label>         <input type="text" id="input_sample" name="xxxx" value="" />     </label> </div> 

css:

label {     display: block; } .left {     float: left; } #input_sample {     width:180px; } #spinner {     margin-left:10px; } 

jsfiddle: http://jsfiddle.net/7fgly/