tinyMCE editor doesnt look the same as output
<p>I am using tinyMCE editor, and I am using 2 same divs with <code>float:right;</code> in the CSS.</p>

<p>The issue I am having is that when I save the HTML, and open the saved content on any browser, it doesn't look the same as in the editor.</p>

<p>As an example I have attached 2 pictures, note there is a difference in the height of the blue boxes (in the editor and in the output). </p>

<p>Editor:</p>

<p><a href="https://i.stack.imgur.com/LpDtq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LpDtq.png" alt="enter example editor"></a></p>

<p>Output:
<a href="https://i.stack.imgur.com/eqjNf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eqjNf.png" alt="enter example browser"></a></p>

<p>Here is the HTML in the editor:</p>

<pre><code>&lt;div class="sub-mw" div=""&gt;
1 &lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;

&lt;!--@*@TStem1@*@--&gt;
&lt;div id="enews"&gt;
&lt;div class="enewstext"&gt;News&lt;/div&gt;
&lt;/div&gt;
&lt;!--@*@TEtem1@*@--&gt; 

&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;

&lt;!--@*@TStem1@*@--&gt;
&lt;div id="enews"&gt;
&lt;div class="enewstext"&gt;News&lt;/div&gt;
&lt;/div&gt;
&lt;!--@*@TEtem1@*@--&gt;

1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;&lt;br /&gt;as&lt;br /&gt;dasd
&lt;br /&gt;asd&lt;br /&gt;a&lt;br /&gt;da
&lt;/div&gt;
</code></pre>

<p>Also Here is the css used:</p>

<pre><code>.enewstext {
    color: #FFF;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #0163b1;
    width: 100%;
    box-shadow: 0px 5px 0px #FFF;
    text-indent: 20px;
}

#enews{
    background:#3394e1;
    width:18%;
    height:300px;
    float:right;
}
</code></pre>

<p><strong>Edit 1:</strong>
In this scenario, tracing the issue, it is caused by the <code>&lt;br&gt;</code> tag. It has a smaller height in the tinymce editor than on chrome. </p>

<p>Any Idea on how to fix this ?</p>