title: label and input in same line on mobile
body: <p>I am trying to get label and input field in the same line when the width is big enough, and on separate lines when the width is too small. </p>
  
  <p>This actually works, see <a href="http://jsfiddle.net/qCmxZ/" rel="nofollow">this jsFiddle</a>. </p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div style="border-bottom-width:0;" data-role="fieldcontain"&gt;
      &lt;label for="ti_gebdat"&gt;Geburtsdatum&lt;/label&gt;
      &lt;input name="ti_gebdat" id="ti_gebdat" style="text-align: right" type="date"  data-theme="d"&gt;
  &lt;/div&gt;
  &lt;div style="border-bottom-width:0;" data-role="fieldcontain"&gt;   
      &lt;label for="oeffDienst"&gt;Öffentlicher Dienst&lt;/label&gt;
      &lt;select name ="oeffDienst" id="oeffDienst" data-role="slider"&gt;
          &lt;option value="0"&gt;Nein&lt;/option&gt;
          &lt;option value="1"&gt;Ja&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But, as you can see at the jsFiddle, the controls jump to the next line way too early. How can I have it stay on the same line until the controls really would overlap?</p>
  
  <p>I am using jQuery-Mobile and testing on android, where the controls are always on separate lines.</p>