CSS: Preventing Tooltip Position Drift on Window Resize for Dynamic Width Parent Element

Question

I am working with a CSS layout where I have a tooltip element positioned above a dynamic width container (RateChart). Inside this container, there is a PercentMemory element represented by a thin vertical line, which should always align with the center of the tooltip regardless of the container's width. The container width is set using a percentage, and the tooltip is absolutely positioned.

However, when resizing the window, the tooltip drifts away from its correct position above the PercentMemory line. I need the tooltip to stay perfectly aligned with the PercentMemory line when the window size changes.

Here is the relevant part of my styled-components code: React

import { COLORS } from "src/constants/colors"

export const Chart = () => {
  return (
    <>
      <Tooltip>
        <TooltipText>
          <p>Average</p>
          <p>50%</p>
        </TooltipText>
      </Tooltip>
      <RateChart>
        <PercentMemory />
      </RateChart>
      <PercentLabel>
        <PercentText>100%</PercentText>
        <PercentText>50%</PercentText>
        <PercentText>0%</PercentText>
      </PercentLabel>
    </>
  )
}


const RateChart = styled.div`
  width: 98%;
  height: 32px;
  position: relative;
  /* additional styles */
`;

const PercentMemory = styled.div`
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* additional styles */
`;

const Tooltip = styled.div`
  width: 90px;
  height: 28px;
  position: absolute;
  /* additional styles */
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    /* additional styles */
  }
`;

Rendered code

<div class="Rate__Tooltip-aoquhy-1 bwurvA"><p class="Rate__TooltipText-aoquhy-2 cALzCT"><p>Average/p><p>50%</p></p></div>
<div class="Rate__MarginMaintenanceRateChart-aoquhy-0 bGHEIm">
<div class="Rate__PercentMemory-aoquhy-3 dDHzNW"></div>
</div>
.bwurvA {
    width: 90px;
    height: 28px;
    border-radius: 6px;
    position: absolute;
    padding: 8px 16px 8px 16px;
    z-index: 100;
    position: absolute;
    top: 520px;
    left: 330px;}

.bGHEIm {
    width: 98%;
    height: 32px;
    background: linear-gradient(90deg,#0041f1 0%,#5c3eab 51.56%,#ea6a42 74.48%,#ee1818 100%);
    margin: 100px auto 10px auto;
    padding: 2px,8px,2px,8px;
    position: relative;
}
.dDHzNW {
    background-color: #FFFFFF;
    height: 100%;
    width: 2px;
    z-index: 100;
    position: relative;
}

The tooltip needs to adapt to the window size changes and maintain its position over the PercentMemory line. I tried using media queries to adjust the tooltip's position based on specific breakpoints, but this solution is not scalable as the tooltip's position should be fluid and respond to any window size.

How to keep the tooltip aligned with the PercentMemory line across all window sizes?

The image is an example, so don't worry about the tooltip being at 100% memory when the value is 50%. The only problem is that the arrow does not exist directly above the white white line.