My goal is to have the label and input field appear on the same line when there is enough width, but on separate lines when the width is too small.
I have achieved this functionality, you can see it in action on this jsFiddle.
Here is the 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>
However, in the jsFiddle demonstration, the controls move to the next line too early. I am looking for a solution to keep them on the same line until they would actually overlap.
I am utilizing jQuery-Mobile and testing on android devices where the controls always display on separate lines.