How to precisely place a div element on a map using leaflet js?

I have tried this couple of ways but have not been able to get it working. I want to place clocks at the top of the map within multiple timezones. I have a the javascript to create the clock and I place the clock in a div element.

Here is what I tried:

1. Create a Point with 0,0 coordinates.
2. From this point get the latitude value for the top of the map using containerPointToLatLng.
3. Create LatLng using the above lat and long for the timezone.
4. Converted this LatLng to Point and then positioning the div element with the x,y from this point.

I execute the logic both when the page is first rendered and then on body resize. However, if I change the size of the browser window, the clock does not position correctly.

Any suggestions?