I haven't dedicated much time to the UI aspect of my project. I have a main div with two nested divs. These two divs initially appear side by side, but when I resize the window, they stack on top of each other. My goal is for these divs to remain next to each other even when the window is resized, and for the browser window to display a horizontal scrollbar if needed to view content.
Despite trying different methods, I have not been able to achieve this desired layout.
body {
background-color: white;
}
#mainContainer {
overflow: hidden
}
#firstBox {
background-color: gray;
margin: 10px;
padding: 10px;
overflow-x: auto;
width: 45%;
height: 30%;
float: left;
display: inline-block;
}
#secondBox {
background-color: gray;
margin: 10px;
padding: 10px;
overflow: auto;
width: 45%;
height: 30%;
float: left;
display: inline-block;
position: fixed;
}<div id="mainContainer">
<div id="firstBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec
</div>
<div id="secondBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec,
</div>
</div>