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. 

This actually works, see [this jsFiddle](http://jsfiddle.net/qCmxZ/). 

HTML Code:

```
<div style="border-bottom-width:0;" data-role="fieldcontain">
    <label for="ti_gebdat">Geburtsdatum</label>
    <input name="ti_gebdat" id="ti_gebdat" style="text-align: right" type="date"  data-theme="d">
</div>
<div style="border-bottom-width:0;" data-role="fieldcontain">   
    <label for="oeffDienst">Öffentlicher Dienst</label>
    <select name ="oeffDienst" id="oeffDienst" data-role="slider">
        <option value="0">Nein</option>
        <option value="1">Ja</option>
    </select>
</div>

```

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?

I am using jQuery-Mobile and testing on android, where the controls are always on separate lines.