I would like to keep the following elements on the same line (horizontal plane), provided there is enough horizontal real estate to do so …
#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%);
}
.profileField {
padding: 10px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 20px;
display: inline-block;
white-space: nowrap;
}<div id=“profileContainer”>
<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="2">2</li><li rel="3">3</li><li rel="4">4</li>…<li rel="28">28</li><li rel="29">29</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="1902">1902</li><li rel="1903">1903</li><li rel="1904">1904</li>…<li rel="2019">2019</li><li rel="2020">2020</li><li rel="2021">2021</li></ul></div>
</div>
</div>The problem is, if you look at my JSFiddle — https://jsfiddle.net/3nwpv8ch/, you’ll notice that even when you compress the screen horizontally so that there’s not enough room for the elements, they do not start to wrap, and instead you simply cannot see them. How can I get the elements to wrap only if there is not enough horizontal screen real estate available? If there is enough, I would want the elements to continue to remain on the same line.
You can do like this, where you simply remove display: inline-block and white-space: nowrap from the profileField rule
Note: I also temporary removed the translate so one easily can see how it behaves
body {
text-align: center;
}
#profileContainer {
border-radius: 25px;
background: #000000;
padding: 10px;
display: inline-block;
position: relative;
}
.profileField {
padding: 10px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 20px;
}
.selectMenu {
font-family: 'Oxygen', sans-serif;
font-size: 20px;
height: 50px;
-webkit-appearance: menulist-button;
}
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #fff;
width: 220px;
height: 42px;
}
.select-styled.active {
background-color: #737373;
}
.select-styled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
padding: 11px 12px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.select-options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0;
list-style: none;
background-color: darken(gray, 5);
}<div id="profileContainer">
<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="3">March</li>
<li rel="4">April</li>
<li rel="5">May</li>
<li rel="6">June</li>
<li rel="7">July</li>
<li rel="8">August</li>
<li rel="9">September</li>
<li rel="10">October</li>
<li rel="11">November</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="2">2</li>
<li rel="3">3</li>
<li rel="4">4</li>
<li rel="5">5</li>
<li rel="6">6</li>
<li rel="7">7</li>
<li rel="8">8</li>
<li rel="9">9</li>
<li rel="10">10</li>
<li rel="11">11</li>
<li rel="12">12</li>
<li rel="13">13</li>
<li rel="14">14</li>
<li rel="15">15</li>
<li rel="16">16</li>
<li rel="17">17</li>
<li rel="18">18</li>
<li rel="19">19</li>
<li rel="20">20</li>
<li rel="21">21</li>
<li rel="22">22</li>
<li rel="23">23</li>
<li rel="24">24</li>
<li rel="25">25</li>
<li rel="26">26</li>
<li rel="27">27</li>
<li rel="28">28</li>
<li rel="29">29</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="1902">1902</li>
<li rel="1903">1903</li>
<li rel="1904">1904</li>
<li rel="1905">1905</li>
<li rel="1906">1906</li>
<li rel="1907">1907</li>
<li rel="1908">1908</li>
<li rel="1909">1909</li>
<li rel="1910">1910</li>
<li rel="1911">1911</li>
<li rel="1912">1912</li>
<li rel="1913">1913</li>
<li rel="1914">1914</li>
<li rel="1915">1915</li>
<li rel="1916">1916</li>
<li rel="1917">1917</li>
<li rel="1918">1918</li>
<li rel="1919">1919</li>
<li rel="1920">1920</li>
<li rel="1921">1921</li>
<li rel="1922">1922</li>
<li rel="1923">1923</li>
<li rel="1924">1924</li>
<li rel="1925">1925</li>
<li rel="1926">1926</li>
<li rel="1927">1927</li>
<li rel="1928">1928</li>
<li rel="1929">1929</li>
<li rel="1930">1930</li>
<li rel="1931">1931</li>
<li rel="1932">1932</li>
<li rel="1933">1933</li>
<li rel="1934">1934</li>
<li rel="1935">1935</li>
<li rel="1936">1936</li>
<li rel="1937">1937</li>
<li rel="1938">1938</li>
<li rel="1939">1939</li>
<li rel="1940">1940</li>
<li rel="1941">1941</li>
<li rel="1942">1942</li>
<li rel="1943">1943</li>
<li rel="1944">1944</li>
<li rel="1945">1945</li>
<li rel="1946">1946</li>
<li rel="1947">1947</li>
<li rel="1948">1948</li>
<li rel="1949">1949</li>
<li rel="1950">1950</li>
<li rel="1951">1951</li>
<li rel="1952">1952</li>
<li rel="1953">1953</li>
<li rel="1954">1954</li>
<li rel="1955">1955</li>
<li rel="1956">1956</li>
<li rel="1957">1957</li>
<li rel="1958">1958</li>
<li rel="1959">1959</li>
<li rel="1960">1960</li>
<li rel="1961">1961</li>
<li rel="1962">1962</li>
<li rel="1963">1963</li>
<li rel="1964">1964</li>
<li rel="1965">1965</li>
<li rel="1966">1966</li>
<li rel="1967">1967</li>
<li rel="1968">1968</li>
<li rel="1969">1969</li>
<li rel="1970">1970</li>
<li rel="1971">1971</li>
<li rel="1972">1972</li>
<li rel="1973">1973</li>
<li rel="1974">1974</li>
<li rel="1975">1975</li>
<li rel="1976">1976</li>
<li rel="1977">1977</li>
<li rel="1978">1978</li>
<li rel="1979">1979</li>
<li rel="1980">1980</li>
<li rel="1981">1981</li>
<li rel="1982">1982</li>
<li rel="1983">1983</li>
<li rel="1984">1984</li>
<li rel="1985">1985</li>
<li rel="1986">1986</li>
<li rel="1987">1987</li>
<li rel="1988">1988</li>
<li rel="1989">1989</li>
<li rel="1990">1990</li>
<li rel="1991">1991</li>
<li rel="1992">1992</li>
<li rel="1993">1993</li>
<li rel="1994">1994</li>
<li rel="1995">1995</li>
<li rel="1996">1996</li>
<li rel="1997">1997</li>
<li rel="1998">1998</li>
<li rel="1999">1999</li>
<li rel="2000">2000</li>
<li rel="2001">2001</li>
<li rel="2002">2002</li>
<li rel="2003">2003</li>
<li rel="2004">2004</li>
<li rel="2005">2005</li>
<li rel="2006">2006</li>
<li rel="2007">2007</li>
<li rel="2008">2008</li>
<li rel="2009">2009</li>
<li rel="2010">2010</li>
<li rel="2011">2011</li>
<li rel="2012">2012</li>
<li rel="2013">2013</li>
<li rel="2014">2014</li>
<li rel="2015">2015</li>
<li rel="2016">2016</li>
<li rel="2017">2017</li>
<li rel="2018">2018</li>
<li rel="2019">2019</li>
<li rel="2020">2020</li>
<li rel="2021">2021</li>
</ul>
</div>
</div>
<div class="profileField" style="background-color:green;">
Line 2 - should be on a new line
</div>
</div>Update based on comment
If you want the container to grow when there is space, you could do like this, where you set width: 100% and a max-width: 720px (the sum of the select items) on the #profileContainer