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

I’d like to keep the following HTML elements on the same horizontal plane, assuming there is 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 I added the following CSS to the DIV to make this possible

.profileField {
        display: inline-block;
}

Everything works fine until I put the above DIV in another DIV with the 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 the HTML elements wrap to the next line even though there is enough screen real estate to keep them on the current line. Here is the JS Fiddle that illustrates this — https://jsfiddle.net/63hchayL/ . How do I keep the elements on the same plane and also keep the parent div centered?

Solution

It's because div's are displayed as block by default. To fix your issue add display: inline-block to the div's containing select.

Add below code to your CSS.

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

Updated Fiddle.