Entering "enter" causes a line break in html. What for?

Question

This will be one of those things where a CSS guy pats his forehead and goes “you have to joke,” and I apologize for that. I also apologize for not being able to find a similar question in Stackoverflow when, I am sure, there should be one.

Take a look at this JSfiddle: https://jsfiddle.net/kwende/fqxna79a/

You will notice two tags:

<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>

What I'm perverse is if you type ENTER (in Chrome and Edge) and therefore create a line break between the first and second div, the green and red blocks are no longer on the same line. But CSS hasn't changed. No markup has changed. I don’t understand why (and this is part of my understanding it doesn’t matter) that breaking a new line inside the text document itself will create a new line in the markup rendering. But this is obvious.

Example:

I did not enter ENTER, but

Update : it seems that this question has already been given. Here is a good reference to understand what is happening.

Answer 1

, , , div.

inline-block, , , .

, , , 20% + white space + 80% , 100%, div .

, div 79%, ( ). div .

Answer 2

79% , 0, https://jsfiddle.net/fqxna79a/2/

body{
 font-size: 0;
}

#left, #right {
 font-size: 16px;
}