I have been working on configuring settings for a specific application. The main container for the settings is set as a flex element with a column direction. Within this, I included a div with the class .option, containing an h2 heading and a <select> element. Despite setting the .option container to display as flex and using a row direction, the elements still stack up instead of aligning horizontally.
I experimented with making both the h2 and <select> inline-block elements and tried adjusting their width to 50%, but nothing seems to change the layout. Below you will find a screenshot highlighting the issue, along with the relevant HTML and CSS snippets.
#SettingsOverlay {
display: block;
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
background-color: rgba(48, 48, 48, 0.7);
background-size: cover;
}
#SettingsOverlay div {
width: 80%;
height: 80%;
background-color: purple;
margin: auto;
padding: 10px;
display: flex;
flex-direction: column;
}
#Options {
display: flex;
flex-direction: column;
}
.option {
display: flex;
flex-direction: row;
}
.option h2 {
display: inline-block;
width: 50%;
}
.option select {
display: inline-block;
width: 50%;
}<div id='SettingsOverlay'>
<div>
<h1>Settings</h1>
<div id='Options'>
<div class='option'>
<h2>Timezone</h2>
<select>
<option value="GMT-12">GMT-12</option>
<option value="GMT-11">GMT-11</option>
<option value="GMT-10">GMT-10</option>
...
</select>
</div>
</div>
</div>
</div>