title: showing label and input in same line using css
body: <p>I have a html mark up with label and inputbox. However, for business reasons, I need to show the label and inputbox on sameline and hide the placeholdertext. The end result should look like the placeholder text is staying there. Example is here: <a href="http://jsfiddle.net/XhwJU/">http://jsfiddle.net/XhwJU/</a></p>
  
  <p>Here is the markup for reference:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Test Page&lt;/title&gt; 
  &lt;/head&gt;
  &lt;body&gt;
     &lt;h1&gt; test &lt;/h1&gt;
     &lt;div class="inputdata"&gt;
        &lt;label for="AccessCode"&gt; Access Code: &lt;/label&gt;
        &lt;div style="display:inline"&gt; &lt;input type="text" name="accessCode" id="AccessCode" value=""  placeholder="" /&gt; &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>​    ​</p>
  
  <p>Here is the styles used:</p>
  
  <pre><code>.inputdata {
    border: thin solid gray;
    padding: 0.1em;
    margin: 0.1em;
    vertical-align: middle;
  }
  
  div .inputdata label {
    width:auto;
    float:left;
    color: gray;
    line-height: 2;
    padding-top: .4em;
  }
  
  input[type='text']{
    overflow:hidden;
    line-height: 2;
    box-shadow: none;
    border:none;
    vertical-align: middle;
    background:none;
    width:100%;
  }
  
  .clear {
    clear: both; 
    height: 1px; 
    overflow: hidden; 
    font-size:0pt; 
    margin-top: -1px;
  }​
  </code></pre>
  
  <p>As you can see in the jsfiddle, label and input show in separate lines. I want the label and input to show up on same line irrespective of the screenwidth. Label shall have a fixed size that allows it to fit contents in one line and the input shall occupy the rest of the screen width. </p>
  
  <p>appreciate any help</p>