Entering "enter" causes line break in html. Why?
<p>This is going to be one of those things where a CSS guy would slap his forehead and go "you've got to be kidding me", and for that I apologize. I also apologize for not being able to find a similar question on Stackoverflow when, I'm quite sure, there's got to be one. </p>

<p>Take a look at this JSfiddle: <a href="https://jsfiddle.net/kwende/fqxna79a/" rel="nofollow noreferrer">https://jsfiddle.net/kwende/fqxna79a/</a></p>

<p>You'll notice two  tags in there: </p>

<pre><code>&lt;div id="left"&gt;Left&lt;/div&gt;&lt;div id="right"&gt;&lt;p&gt;Right&lt;/p&gt;&lt;p&gt;Right 2&lt;/p&gt;&lt;/div&gt;
</code></pre>

<p>What I'm weirded out by is if you enter ENTER (in Chrome and Edge) and therefore create a line-break between the first and second divs, the green and red blocks are no longer on the same line. But no CSS changed. No markup changed. I do not understand why (and it's part of my understanding this shouldn't matter) that a newline break within the text document itself would create a new line in the rendering of the markup. But it obviously does. </p>

<p>Example: </p>

<p><a href="https://i.stack.imgur.com/0E0tc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0E0tc.png" alt="enter image description here"></a></p>

<p>Is where I haven't entered ENTER, and </p>

<p><a href="https://i.stack.imgur.com/Fj7oa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fj7oa.png" alt="enter image description here"></a></p>

<p><strong>Update</strong>: it appears as though this question has been answered before. <a href="https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements">Here</a> is a good link to follow to understand what's going on. </p>