The jQuery Mobile framework is designed so that all elements are flexible and comfortably fit the width of any mobile device screen; more importantly, depending on the screen width, jQuery Mobile displays labels and their associated elements side-by-side if the page is wider than 480px.
This means that, if our page is narrower than the above-mentioned size, elements will be placed under their label, to save horizontal space and improve the page layout.
On the other hand, on wider screens, labels and form elements are styled as inline (as opposed to the block styling applied in the other case) and take advantage of the greater width of the screen.
Tip
On a wider screen that allows side-by-side placement, we can further improve the overall look and feel by wrapping form elements and labels into a div or fieldset with a data-role="fieldcontain" attribute.
This makes sure the framework adds a thin vertical bottom border on this container to act as a field separator and visually aligns...