I'm currently studying react and want to build a timetable project. I have built a timetable using simple html tables like this:

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

And I want to add a event as a sibling of that table, with code like

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

And I indeed achieve the result like the image attached (the red box are for demonstration of each cell in a table).

However, I have a problem, the "some event" box's top left corner should be at the exact same location as the box1 (the cell in the table). I think it is possible by assigning the exact same top left css value as the "box 1" cell. However, when the page's size changes, the cell "box 1" 's location will change, and will result in a mismatch between the "some event" box's location and the "box 1" 's location.

Thus, my question is: is there a way, either in css, or using some state function, to actively sync one component's location exactly as the other. I have searched for a long time but barely found one answer. Any suggestions help!