Actualmente estoy estudiando reaccionar y quiero construir un proyecto de calendario. He creado un horario usando tablas html simples como esta:

 <tbody> <tr> <td> </td> <td> </td> .... </tr> ... </tbody>

Y quiero agregar un evento como hermano de esa tabla, con un código como

 <div className="card" style = {{color: "red", width: "18rem", height: "10rem", zIndex:0, position: "absolute", top: "20%", left: "10%"}} > some event</div>

Y, de hecho, logré el resultado como la imagen adjunta (el cuadro rojo es para la demostración de cada celda en una tabla).

Sin embargo, tengo un problema : la esquina superior izquierda del cuadro "algún evento" debe estar exactamente en la misma ubicación que el cuadro 1 (la celda de la tabla). Creo que es posible asignando exactamente el mismo valor css superior izquierdo que la celda "box 1". Sin embargo, cuando cambia el tamaño de la página, la ubicación de la celda "cuadro 1" cambiará y dará como resultado una discrepancia entre la ubicación del cuadro "algún evento" y la ubicación del "cuadro 1".

Por lo tanto, mi pregunta es : ¿hay alguna manera, ya sea en css o usando alguna función de estado, para sincronizar activamente la ubicación de un componente exactamente como el otro? He buscado durante mucho tiempo pero apenas encontré una respuesta. ¡Cualquier sugerencia ayuda!