I need assistance with aligning two divs side by side using the display:inline-block property. However, I am facing an issue when applying overflow-x:scroll to the main container. When the screen size is reduced, one of the div elements moves below the other. How can I prevent this behavior and ensure both divs remain aligned horizontally regardless of the screen size?
Here's a link to the JSFiddle for reference.
<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}
.test1{
background-color:red;
width:500px;
margin-left:16px;
display:inline-block;
}
.test2{
margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;
vertical-align:top;
}