How to keep two divs in one row and two divs in one row

How to keep two divs in one row and two divs in one row

We know that div is a block-level element and exclusive to a row. Generally, two adjacent divs are not in a row.
For example:

<! DOCTYPE html> 

Browser effect:

So how can we make two adjacent divs in the same row?
There are two methods

<! DOCTYPE html> 

Running effect:

<! DOCTYPE html> 

Running effect:

Note:
(1) Why use display: inline-block instead of display: inline; Because display: inline invalidates the height and width styles of elements.
(2) Why is the display effect different from that of the two methods?
In method 2, there will be 8 PX margin in the two divs. Where does this come from? It is inherited from the body.