css - How do I keep my HTML elements on the same horizontal plane inside a parent DIV? -

i’d keep following html elements on same horizontal plane, assuming there enough screen real estate ….

  <div class="profilefield">     birthday<br>      <div class="select"><select id="user_dob_2i" name="user[dob(2i)]" class="select-hidden"> <option value="">select month</option> <option value="1">january</option> … <option value="12">december</option> </select><div class="select-styled">select month</div><ul class="select-options" style="display: none;"><li rel="">select month</li>…<li rel="12">december</li></ul></div> <div class="select"><select id="user_dob_3i" name="user[dob(3i)]" class="select-hidden"> <option value="">select day</option> <option value="1">1</option> … <option value="31">31</option> </select><div class="select-styled">select day</div><ul class="select-options" style="display: none;"><li rel="">select day</li><li rel="1">1</li>…<li rel="31">31</li></ul></div> <div class="select"><select id="user_dob_1i" name="user[dob(1i)]" class="select-hidden"> <option value="">select year</option> <option value="1900">1900</option> …  <option value="2021">2021</option> </select><div class="select-styled">select year</div><ul class="select-options" style="display: none;"><li rel="">select year</li><li rel="1900">1900</li>…<li rel="2021">2021</li></ul></div>   </div> 

so added following css div make possible

.profilefield {         display: inline-block; } 

everything works fine until put above div in div below style

#profilecontainer {     border-radius: 25px;     background: #ffffff;     padding: 10px;     display: inline-block;     position: fixed;     top: 50%;     left: 50%;     -webkit-transform: translate(-50%, -50%);     transform: translate(-50%, -50%); } 

now html elements wrap next line though there enough screen real estate keep them on current line. here js fiddle illustrates — https://jsfiddle.net/63hchayl/ . how keep elements on same plane , keep parent div centered?

it's because div's displayed block default. fix issue add display: inline-block div's containing select.

add below code css.

.profilefield .select{   display: inline-block; } 

updated fiddle.