JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popover-wrapper">
    <div id="popover-direction-setter">
        <div id="actual-popover-div">
            <div id="content-with-unknown-height">
                Content with unknows dimensions. Tip should point to the blue dot
            </div>
            <div id="triangle-tip"></div>
        </div>
    </div>
</div>

<div id="target-blue-dot"></div>

CSS

#popover-wrapper {
    left: 200px; /* same positions as the blue dot */
    top:  100px;
    
    position: absolute;
    width:  0px;
    height: 0px;
}
#popover-direction-setter {
    position: absolute;
    right: 0px; /* grow left */
    top:   0px;
    background: #EEE; /* for debugging */
}
#actual-popover-div {
    position: relative;
    left: -20px;
    top:   -50%;   /* this does not work */
    /* top:   -71px;  /* i want this, without using content dimensions */
    padding: 0.5em;
    background: black;
    color: white;
    border-radius: 15px; 
}

#triangle-tip {
    position: absolute;
    width:  0;
    height: 0;
    top:           50%;
    margin-top:   -20px;
    border-top:    20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left:   20px solid black;
    right:        -20px;
}

#target-blue-dot{
    position: absolute;
    left: 200px;
    top:  100px;
    background: blue;
    width:   8px;
    height:  8px;
    margin: -4px;
    border-radius: 10px;
}