Which value of the display property allow the next element to sit beside it?

We can use the inline or inline-block value for the display property to position div elements (block element) side by side.

For the <div> element, by default the value of the display property is block. So, as you know, a block element starts on a new line and take up the whole width.

<div class="my-div">
   Div element 1
</div>
<div class="my-div">
  Div element 2
</div>

Using the display:inline property. #

display:inline property is used to display an element as an inline element.

<style>
  .my-div{
    display: inline;
  }
</style>

<div class="my-div">
   Div element 1
</div>
<div class="my-div">
  Div element 2
</div>

Using the display:inline-block property. #

display:inline-block property is used to display an element as an inline-level block element.

<style>
  .my-div{
    display: inline-block;
  }
</style>

<div class="my-div">
   Div element 1
</div>
<div class="my-div">
  Div element 2
</div>