Cannot insert elements into bootstrap columns

[insanegyros]

Hello, I have a little problem. I try to make a simple editor for our company's blog and I tried to make som bootstrap columns to align content. My main issue is, I have added a bootstrap column like this

editor.BlockManager.add('bootstrap-column', {
        label: 'Bootstrap Column',
        content: `
                <div class="row">
                    <div class="col-6" style="min-height: 50px; padding-bottom: 1em;">
                        
                    </div>
                    <div class="col-6" style="min-height: 50px; padding-bottom: 1em;">

                    </div>
                </div>
            `,
        category: 'Bootstrap'
    });

but I can't drag and drop any other conetent into it. The only way this works like I intend to is if I add any block element into the cols, even empty <div> will do, but it then create inconsistencies in the code and sometimes causes issues when deleting elements.

How to make the column be able to have content nested into it without adding any block element into the column template?

(Example of working - not intended way)

editor.BlockManager.add('bootstrap-column', {
        label: 'Bootstrap Column',
        content: `
                <div class="row">
                    <div class="col-6" style="min-height: 50px; padding-bottom: 1em;">
                        <div></div>
                    </div>
                    <div class="col-6" style="min-height: 50px; padding-bottom: 1em;">
                        <div></div>
                    </div>
                </div>
            `,
        category: 'Bootstrap'
    });

[artf]

I'd not expect any issues here. I tried myself by simply importing Bootstrap and everything looks working fine.
Are you able to create a reproducible demo?