Despite being an old inquiry, I spent several hours searching for a solution to this topic. Eventually, I managed to find my own solution based on the original fiddle.
I acknowledge that there is likely a more efficient and cleaner way to achieve this. After all, I still consider myself a novice in this area.
In order to implement the solution, I included the necessary JavaScript code:
var el_from = document.getElementById("alignwithme1")
var rect = el_from.getBoundingClientRect();
var el_to = document.getElementById("se1")
new_style = "position: absolute; width:270px; top: " + rect.top + "px;"
/* console.log(new_style)
displays: position: absolute; width:270px; top: 55px; */
el_to.style= new_style;
el_from = document.getElementById("alignwithme2")
rect = el_from.getBoundingClientRect();
el_to = document.getElementById("se2")
new_style = "position: absolute; width:270px; top: " + rect.top + "px;"
/* console.log(new_style)
displays: position: absolute; width:270px; top: 278px; */
el_to.style= new_style;
For reference, here is the fiddle with the implemented solution.
This approach is based on a widely-used method for determining the position of an HTML element in the DOM, which involves leveraging the getBoundingClientRect() function.
Subsequently, I generate a new styling attribute (1) for the element that requires alignment and apply it accordingly.
However, I have encountered a couple of challenges that I have yet to resolve completely:
- Adjusting the width to a specific size is proving difficult, as the application of
position: absolute appears to impact the functionality of width: auto
- There appears to be a minor misalignment issue that I have been unable to pinpoint.