Inline form form input element using jquery mobile

Question

Well, I created a mobile jquery form, but each element is on a new line. I would put the PR field after Birth Place in a unique line, and the "Male / Female" switch on the same line as "Date of birth". How can i do I even tried using a grid column layout, but it didn't work. This is my own code:

<div data-role = "content"> <form action = "?" method="post" name="form" id = "form"> <fieldset> <div data-role = "fieldcontain" class = "ui-hide-label"> <label for="name">Name</label> <input type="text" name="name" id="name" value="" placeholder="Name" /> </div> <div data-role ="fieldcontain" class= "ui-hide-label"> <label for="surname">Surname</label> <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> </div> <div data-role ="fieldcontain" class= "ui-hide-label"> <label for="address">Address</label> <input type="text" name="address" id="address" value="" placeholder="Address"/> </div> <div data-role="fieldcontain" class = "ui-hide-label"> <label for="birth-place">Birth Place</label> <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" /> </div> <div data-role = "fieldcontain" class="ui-hide-label"> <label for="province">Province</label> <input type="text" name="province" id="province" value="" placeholder="PR" /> </div> <div data-role="fieldcontain" class="ui-hide-label"> <label for"date">Birth Date</label> <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" /> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" /> <label for="radio-choice-1">Male</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" /> <label for="radio-choice-2">Female</label> </fieldset> </div> <div data-role="fieldcontain" data-type="horizontal"> <label for="select-choice-0"></label> <select name="select" id="select"> <option value="politrauma">Politrauma</option> <option value="cardiologico">Cardiologico</option> <option value="neurologico">Neurologico</option> </select> </div> </div> </fieldset> </form> </div> 

Answer 1

Grid Layout of two columns works great. Below is the code after modification.

 <form action = "?" method="post" name="form" id = "form"> <fieldset> <div data-role = "fieldcontain" class = "ui-hide-label"> <label for="name">Name</label> <input type="text" name="name" id="name" value="" placeholder="Name" /> </div> <div data-role ="fieldcontain" class= "ui-hide-label"> <label for="surname">Surname</label> <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> </div> <div data-role ="fieldcontain" class= "ui-hide-label"> <label for="address">Address</label> <input type="text" name="address" id="address" value="" placeholder="Address"/> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <div data-role="fieldcontain" class = "ui-hide-label"> <label for="birth-place">Birth Place</label> <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" /> </div> </div> <div class="ui-block-b" style="width:48.5%"> <div data-role = "fieldcontain" class="ui-hide-label"> <label for="province">Province</label> <input type="text" name="province" id="province" value="" placeholder="PR" /> </div> </div> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <div data-role="fieldcontain" class="ui-hide-label"> <label for"date">Birth Date</label> <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" /> </div> </div> <div class="ui-block-b"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" /> <label for="radio-choice-1">Male</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" /> <label for="radio-choice-2">Female</label> </fieldset> </div> </div> </div> <div data-role="fieldcontain" data-type="horizontal"> <label for="select-choice-0"></label> <select name="select" id="select"> <option value="politrauma">Politrauma</option> <option value="cardiologico">Cardiologico</option> <option value="neurologico">Neurologico</option> </select> </div> </div> </fieldset> </form>