title: Problems with TinyMCE <br> & <p> tags
body: <p>Long story short, I've read a TinyMCE documents (4.x) top to bottom more than once.</p>
  
  <p>My problem is that I have in my TinyMCE editor a custom button what adds two columns in the editor. The HTML syntax is:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="half-column"&gt;
          &lt;p&gt;Half Column&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="half-column"&gt;
          &lt;p&gt;Half Column&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But if the user delete the <code>Half Column</code> text the syntax changes to:</p>
  
  <pre><code>    &lt;div class="wrapper"&gt;
          &lt;br&gt;
          &lt;div class="half-column"&gt;
              &lt;p&gt;Half Column&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So the <code>br</code> tag overrides the <code>div</code> tag and that's the problem.
  Ideal HTML syntax would be:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="half-column"&gt;
          &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="half-column"&gt;
          &lt;p&gt;Half Column&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Or:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="half-column"&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="half-column"&gt;
          &lt;p&gt;Half Column&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've played around with these settings: <a href="https://www.tinymce.com/docs/configure/content-filtering/" rel="nofollow noreferrer">https://www.tinymce.com/docs/configure/content-filtering/</a>
  and I think that <code>valid_children</code> setting could help me out but - at least for now - I haven't figured it out yet.</p>
  
  <p>What makes this interesting and pretty weird for me is that if I start typing in empty editor <code>p</code> tag will come and if I then remove the typed text the <code>p</code> tag will stay. I have set <code>forced_root_block: 'p'</code>.</p>
  
  <p>but if I start typing for example inside <code>&lt;div class="custom-div"&gt;&lt;/div&gt;</code> the <code>p</code> tag won't came, so if user remove the paragraph the whole <code>div</code> element will disappear.</p>
  
  <p>I have read also a lot of articles all over the internet about this, so if you have any kind of suggestion, please reply I'd highly appreciate it.</p>