ANGULAR - Cursor 'resize' on drag

Question

I am writing, because I have a problem with my resizeable component. I want have only cursor 'resize' instead of 'not-allowed' on drag. Could you please for your help?

Component

resizeable.component.ts

import { Component, ContentChild, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-resizeable',
  templateUrl: './resizeable.component.html',
  styleUrls: ['./resizeable.component.scss']
})
export class ResizeableComponent implements OnDestroy {
  @ViewChild('line') line: ElementRef;
  @ContentChild('content') content: ElementRef;

  initHeight: number;
  initPositionY: number;

  private unsubscribe$: Subject<void> = new Subject<void>();

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  onDrag(event: DragEvent): void {
    const height = this.initHeight + (event.clientY - this.initPositionY);
    this.content.nativeElement.style.height = `${height}px`;
    event.preventDefault();
  }

  onDragEnd(event: DragEvent): void {
    event.preventDefault();
  }

  onDragStart(event: DragEvent): void {
    event.dataTransfer.effectAllowed = 'move';
    this.initHeight = this.content.nativeElement.getBoundingClientRect().height;
    this.initPositionY = event.clientY;
  }
}

resizeable.component.html

<ng-content></ng-content>

<div
  #line
  *ngIf="content"
  (dragend)="onDragEnd($event)"
  (dragstart)="onDragStart($event)"
  (drag)="onDrag($event)"
  class="break-line"
  draggable="true"
>
  <hr />
</div>

resizeable.component.scss

.break-line {
  cursor: row-resize;
  height: 0.5rem;
  margin-top: 3rem;
  width: 100%;
  -webkit-user-drag: element;
  -webkit-user-select: none;
}