Dragula - drag and drop column in angular 2

Question

I'm using Dragula for drag and drop on my tables. Also I'm using plugin angular resizier element for resizing table columns Plugin url here. All this I've been working in Angular2.

Here is part of code where I'm achieving this.

<div class="row first-row" [dragula]='"evented-bag"' [dragulaModel]='columns'>

    <div *ngFor="let rowTitle of columns; let i = index" class="col"
         [style.min-width.px]="rowTitle.width" 
         [style.width.px]="rowTitle.width" 
         [attr.column-name]="rowTitle.name"
         mwlResizable
         [validateResize]="validate"
         [resizeEdges]="{bottom: false, right: true, top: false, left: false}"
         [enableGhostResize]="false"
         (resizeEnd)="onResizeEnd($event, rowTitle)">

        <label>
            {{rowTitle.name}}
            <a (click)="sortColumn(rowTitle.key)">
            </a>
        </label>
    </div>
    <div class="col" *ngIf="columnNames.length != 0">
        <label>More</label>
    </div>
</div>

So, the dragula need's to be placed on div before the div with *ngFor. Then dragula uses full width of each table column.

Problem is when I want to resize column and when I start to drag right border (because I made it like this) to resize it, it also starts to drag whole column. In some cases it resizes column but in most cases it moves column.

One part of solution I've tried is to make dragula column smaller and than place another div in div with class="col" in which is angular-resizable-element and on that div add some left-right padding. But this part was unsuccessfull.

Question: Can somebody help me to make dragula and angular-resizable-element work together without trouble.