title: display div next to label without breaking line
body: <p>I would like to drow a label and input text next to it.<br>
  the input text must be inside a div - later I would like to add element to the div.<br>
  I am using float in order to display the div next to the label/</p>
  
  <p>here is me html:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" &gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
          label: &lt;div style="float:left;"&gt;&lt;input type="text" /&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Ihe problem is that I get the div before the text.</p>
  
  <p><a href="http://jsfiddle.net/2wNbR/">http://jsfiddle.net/2wNbR/</a></p>
  
  <p>How can I fix it?</p>
  
  <p><strong>UPDATE</strong><br>
  I actually want to use an autocomplete plugin I've wrote instead of the input text. The autocomplete uses a div. I don't want to create a "prerequisite" to the label so solution like add <code>&lt;span style="float:right"&gt;&lt;/span&gt;</code> around the label are not good.</p>
  
  <p><strong>UPDATE2</strong><br>
  I thought it is not necessary but I see it is importent.<br>
  Here is the full example: <a href="http://jsfiddle.net/2wNbR/16/">http://jsfiddle.net/2wNbR/16/</a></p>
  
  <pre><code>.Autocomplete {
      direction: ltr;
  }
  
  .Autocomplete, .Autocomplete .Arrow, .Autocomplete .CodeField,
  .Autocomplete .SmartField, .Autocomplete .Selector {
      float:left;
  }
  
  .Autocomplete .Arrow {
      background-image:url(drop.gif);
      background-position:top right;
      height:17px;
      width:17px;
      cursor:pointer;
  }
  
  .Autocomplete .OptionsListHolder {
      height:0px;
      width:0px;
  }
  
  .Autocomplete .OptionsList
  {
      position:relative;
      z-index:999;
      top:0px;
      right:0px;
      border: 1px solid #888888;
      font-weight: normal;
      font-size: 12px;
      font-family: Arial (Hebrew);
  }
  
  .Autocomplete .CodeField
  {
      width:40px;
      border: 1px solid #888888;
      height:13px;
  }
  
  .Autocomplete .SmartField
  {
      width:auto;
      border: 1px solid #888888;
      height:13px;
      font-weight: normal;
      font-size: 12px;
      font-family: Arial (Hebrew);
  }
  
      Customer:
      &lt;div class="Autocomplete"&gt;
          &lt;input type="text" class="CodeField" /&gt;
          &lt;div class="Selector"&gt;
              &lt;input type="text" class="SmartField" /&gt;
              &lt;div class="Arrow"&gt;&lt;/div&gt;
              &lt;div class="OptionsListHolder"&gt;
                  &lt;select class="OptionsList" size="8"&gt;
                      &lt;option&gt;opt 1&lt;/option&gt;
                      &lt;option&gt;opt 2&lt;/option&gt;
                      &lt;option&gt;opt 3&lt;/option&gt;
                      &lt;option&gt;opt 4&lt;/option&gt;
                      &lt;option&gt;opt 5 - long item text&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;        
      &lt;/div&gt;
      &lt;br&gt;
      text to check if the OptionsList is override this text
  </code></pre>