Here is a structured example of my HTML and CSS:
<div class="grandparent">
<div class="row">...</div>
<div class="absolute-parent">
<div class="absolute-child">...</div>
</div>
</div>
.grandparent {
position: relative;
}
.absolute-parent {
width: *gets set by JS*
height: 30px;
position: absolute;
top: 0;
bottom: 0;
left: *gets set by JS*
overflow: hidden;
margin: 0 auto;
transition: all 0.5s ease-in-out;
}
.absolute-child{
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
bottom: 0;
position: absolute;
top: 0;
left: *gets set by JS*
margin: auto 0;
transition: left 0.5s ease-in-out;
}
The .absolute-parent has a fixed height, while the width and left position are dynamically set by JavaScript. It acts as a window for the content of .absolute-child, which should be layered with the content of the .row div.
Currently, .absolute-child only expands to fit its content width. I would like it to stretch across the full width of the container in the .grandparent div so that .absolute-child and .row align perfectly on top of each other.
Cheers!