title: how to align label and text field horizontally in jquery mobile
body: <p>I am working on jQuery mobile phone. I have few problems:</p>
  
  <p>First I used <code>data-role="fieldcontain"</code> and still the label and input fields are not horizontal. (not on the same line)</p>
  
  <p>here is my fiddle: <a href="http://jsfiddle.net/ravi1989/vb5jA/" rel="nofollow">http://jsfiddle.net/ravi1989/vb5jA/</a></p>
  
  <pre><code>&lt;div data-role="page" id="foo"&gt;
      &lt;div data-role="header" style="background: green;"&gt;
              &lt;h1&gt;Wbservice&lt;/h1&gt;
      &lt;/div&gt;
      &lt;!-- /header --&gt;
      &lt;div data-role="content"&gt;
  &lt;div data-role="fieldcontain"&gt;
      &lt;label for="name"&gt;Text Input:&lt;/label&gt;
      &lt;input type="text" name="name" id="name" value=""  /&gt;
  &lt;/div&gt;
  
          &lt;label for="flip-1"&gt;Flip switch:&lt;/label&gt;
  &lt;select name="flip-1" id="flip-1" data-role="slider"&gt;
      &lt;option value="off"&gt;Off&lt;/option&gt;
      &lt;option value="on"&gt;On&lt;/option&gt;
  &lt;/select&gt;
      &lt;/div&gt;
      &lt;!--pop up screen--&gt;
  
      &lt;!-- /content --&gt;
      &lt;div data-position="fixed" data-role="footer"style="background: green;"&gt;
  
           &lt;h4&gt;Page Footer&lt;/h4&gt;
  
      &lt;/div&gt;
      &lt;!-- /header --&gt;
  &lt;/div&gt;
  &lt;!-- /page --&gt;
  </code></pre>