HTML DIV's stack one below the other when resizing the browser window

Question

Have not worked much on UI front. I have a main div , and 2 nested div's. The 2 div's appear one besides the other, but when I resize the window the div's stack one below the other. My requirement is, Though I resize the window the divs should be place one besides the other and browser window should have a scroll bar horizontally to scroll right if i want to see the contents.

I did try various approaches but could not succeed.

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>

Answer 1

Just try this add width to container & child elements.

#mainContainer
{
    width:1490px;
    height:auto; 
    overflow-x: auto;
}   
#firstBox {
    background-color: gray;
    margin: 10px;
    padding: 10px;   
    width: 700px;
    height: auto;  
    float: left;
    
}

#secondBox {
    background-color: gray;
    margin: 10px;
    padding: 10px;
    width: 700px;
    height: auto;
    left:750px;
    float: left;
   
}

    <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>

Answer 2

The above code is already working fine and it isn't stacking one below the other I guess, can you tell me when did it stack one below the other.