How to add 2 columns at blockmanager in grapesjs

Hello I am new in grapejs and using grapejs with angular6 i have seen Demo of grapesjs on .

i want to create 2 columns at blockmanager as mentioned on below snapshot marked by red color

i want to add 2 columns at blockmanager and when i drop that column on canvas then it should be appeared as above snapshot looks .

i am using following code for doing same the code i copied from https://github.com/artf/grapesjs/wiki/Blocks

```this.editor = grapesjs.init({
   BlockManager:{

})```

 bm.add('the-row-block', {
      category : 'Basic',
      label: '2 Columns',
      content: '<div class="row" data-gjs-droppable=".row-cell" data-gjs-custom-name="Row">' +
          '<div class="row-cell" data-gjs-draggable=".row"></div>' +
          '<div class="row-cell" data-gjs-draggable=".row"></div>' +
        '</div>',
                
    });

and output of my code is on the below screen

as you can see on above snapshot there is a component at right side of the screen in which 2 columns component is being displayed marked by red colored ractangle issue is when i drop that 2 columns component on the canvas it does not appear on the canvas

can anyone is able to resolve my issue. please help me as soon as possible