Imagine a scenario where there is a 'parent' block containing various elements, including a button. When the user clicks this button, a 'slide' element should appear and cover the parent block but only up to the button itself (as shown in blocks 1 and 2). The slide should always stop just before reaching the button, even when the screen width changes. How can this be achieved?
<div class='parent'>
<div class='first'>1</div>
<div class='second'>2</div>
<div class='btn'>Button</div>
<div class='third'>3</div>
<div class='slide'>
Hello
</div>
</div>
.parent {
display: flex;
}
.first, .second, .third {
padding: 30px;
}
.first {
background-color: salmon;
flex-basis: 120px;
}
.second {
background-color: yellow;
flex-grow: 1
}
.third {
background-color: #56D7F7;
flex-grow: 1
}
.btn {
background-color: red;
cursor: pointer;
}
.slide {
position: absolute;
left: 0
}