如何在父DIV中保持HTML元素在同一水平面上

假设有足够的屏幕空间，我想将以下HTML元素保持在同一水平面上…。

  <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>

因此，我在DIV中添加了以下CSS，使成为可能

.profileField {
        display: inline-block;
}

一切都很好，直到我把上面的DIV放在另一个带有下面样式的DIV中

#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%);
}

现在，HTML元素换行到下一行，即使有足够的屏幕空间将它们保留在当前行。以下是说明这一点的JS Fiddle——https://jsfiddle.net/63hchayL/。如何保持元素在同一平面上，同时保持父div居中？