Angular - Align a dynamic directive's markup with the host?

I have a basic directive named [popover] which all it does is injecting ( as a sibling) - a dynamic component.

I'm using it as :

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button popover>Popover on right</button>   <-- here
    </div>
  `,
})

The directive's code is:

@Directive({ selector: '[popover]'})
class Popover {
  private _component: ComponentRef<>;
    constructor(private _vcRef: ViewContainerRef, private _cfResolver: ComponentFactoryResolver,private elementRef: ElementRef) {
    }
    @HostListener('click')
  toggle() {
    if (!this._component) {
      const componentFactory = this._cfResolver.resolveComponentFactory(PopoverWindow);
      this._component = this._vcRef.createComponent(componentFactory);

    } else {
      this._component.destroy();
      this._component = null;
    }
  }
}

Please notice that the directive creates an injected component on the fly. And this is the injected component :

@Component({
  selector: 'popover-window',
  template: `
    <div class="popover popover-right">
      <h3 class="popover-title">My title</h3>
      <div class="popover-content">
        Lorem ipsum.... 
      </div>
    </div>
  `
})
class PopoverWindow {
}

Result :

The problem is that I want to change the location of the popup according to the hoster which in this case IMHO is elementRef.nativeElement

Question:

How can I align the popup to the right location of the hoster via CSS ? ( is it even possible to do it with css only?)

It is possible to read the location of each elementRef and take its dimensions. But how can I set the new injected component's location to the calculated location ( which is the right side of each button) ?

FULL PLNKR