How can I get the x/y position of my input character in a contenteditable div?

I want to show an overlay with some infos below the input char and so I need to know the position to place the overlay to the position below the input char.

<div style="background-color: yellow; width: 400px; height: 400px;"
  contenteditable="true" (input)="input ($event)"></div>