title: I want to have a div (containing text) be the same line as a textfield
body: <p>I have a div with some description, a textfield and another div with some error message, which only appears if the input is not correct. This is all wrapped in a p Tag.
  My Problem is that i want the error message to appear in the same line as the textfield and description and only if the text is too long, the words that are to much to appear in the next line. 
  However i dont know how to do that, everything I try results into the whole error message appearing in the next line. Anybody knows how to fix that?</p>
  
  <p>Code:
  HTML:</p>
  
  <pre><code>&lt;p&gt;&lt;div class="text"&gt;Benutzername&lt;/div&gt;&lt;input id="bname" class="button" onkeyup="valid('#bname','#bntext')" onkeydown="valid('#bname','#bntext')" type="text" /&gt;&lt;div id="bntext" class="hiddentext"&gt;Der Benutzername muss mindestens 4 Zeichen und darf maximal 8 Zeichen enthalten.&lt;/div&gt;&lt;/p&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.button{
      position:relative;
      left:0%;
  }
  
  .text{
      display:inline-block;
      position:relative;
      text-align:left;
      width:20%;
  }
  .hiddentext {
      /*display:none;*/
      color:#FF0000;  
  }
  </code></pre>
  
  <p>Heres the fiddle:
  <a href="http://jsfiddle.net/LGp8k/" rel="nofollow">http://jsfiddle.net/LGp8k/</a></p>