css - Added display:inline-block, but my HTML elements are still spilling over into a different line -

i keep div elements on same plane, , per advice got in forum, created these elements

<div class="profilefield">     birthday<br>      <div class="select"><div class="select-styled">select month</div><ul class="select-options"><li rel="">select month</li><li rel="1">january</li><li rel="2">february</li>…<li rel="12">december</li></ul></div> <div class="select"><div class="select-styled">select day</div><ul class="select-options"><li rel="">select day</li><li rel="1">1</li>…<li rel="30">30</li><li rel="31">31</li></ul></div> <div class="select"><div class="select-styled">select year</div><ul class="select-options"><li rel="">select year</li><li rel="1900">1900</li><li rel="1901">1901</li>…<li rel="2020">2020</li><li rel="2021">2021</li></ul></div>       </div> 

and here styles, both include “display:inline-block”

.select {     cursor: pointer;     display: inline-block;     position: relative;     font-size: 16px;     color: #fff;     width: 220px;     height: 42px; } .profilefield {         padding: 10px;         font-family: 'oxygen', sans-serif;         font-weight: 300;         font-size: 20px;         display: inline-block;  } 

the above sits in container, style

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

but has display:inline-blocks o i’m not sure why these elements going down new lines. crated jsfiddle demonstrate problem — https://jsfiddle.net/4g7r5zt0/6/

add white-space: nowrap rule, tells children stay on 1 line

.profilefield {   padding: 10px;   font-family: 'oxygen', sans-serif;   font-weight: 300;   font-size: 20px;   display: inline-block;   white-space: nowrap; } 

updated fiddle