Why does inline-block does not make div inline?

Question

I wanted to make an inline div using inline-block, but it doesn't work and either turns it turns one of the two divs below and the other above

#div-on-the-left {
  background-color: #464886;
  width: 200px;
  height: 600px;
  padding: 10px;
  border: 10px double #2c2d54;
  margin: 5px;
}

#big-div-on-the-right {
  background-color: #AAABB8;
  width: 600px;
  height: 600px;
  display: inline-block;
  margin: 5px;
}

<div id="div-on-the-left">
  <!--Some html-->
</div>
<div id="big-div-on-the-right">
  <!--Some html-->
</div>

I also tried giving #div-on-the-left inline-block too, that brought #big-div-on-the-right above, but left a gap where #div-on-the-left was supposed to be and brought #div-on-the-left to the bottom, why is this happening?

Answer 1

YOu would be way better off using a grid or flexboxes. In this case flexboxes would be "easier" and "shorter". You main issue is, that both div-boxes have a different height. The left div-box have a height of 600px + (2x20px) = 640px because of the double border. the right div-box have a height of only 600px causing different line height and therefor will cause a line-break. Next, the minimum-width has to be set large enough to allow both boxes to be displayed next to each other.

In the snippet below, I wrapped both boxes inside a wrapper with a minimum width high enough to let them be displayed next to each other. Then I changed them to display: flex;.

The height for the right box was set to 640px becaue of the border mentioned above.

.wrapper {
  min-width: 850px;
  display: flex;
}

#div-on-the-left {
  background-color: #464886;
  width: 200px;
  height: 600px;
  padding: 10px;
  border: 10px double #2c2d54;
  margin: 5px;
}

#big-div-on-the-right {
  background-color: #AAABB8;
  width: 600px;
  height: 640px;
  margin: 5px;
}

<div class="wrapper">
  <div id="div-on-the-left">
    <!--Some html-->
  </div>
  <div id="big-div-on-the-right">
    <!--Some html-->
  </div>
</div>