CSS side-by-side slider - html

Question

I'm trying to create an animated slider so that the "non-active" slides are still shown on the sides.
The height of the children is not known. Also, when resizing the page, the height might increase.
Currently I have this: https://codepen.io/anon/pen/odoYPx
HTML:
<div class="row side-by-side-slider">
<div class="col-md-6 ss-slide-left ss-slide">
<div class="ss-slide-content">
Content
</div>
</div>
<div class="col-md-6 ss-slide active">
<div class="ss-slide-content">
Content
</div>
</div>
<div class="col-md-6 col-md-push-10 ss-slide">
<div class="ss-slide-content">
Content
</div>
</div>
</div>
CSS:
body {
overflow: hidden;
}
.side-by-side-slider {
overflow: hidden;
}
.side-by-side-slider .ss-slide {
position: absolute;
opacity: .26;
margin: 0 15px;
background: #f5f4f4;
-webkit-box-shadow: 0 0 40px 0 #F5F4F4;
box-shadow: 0 0 40px 0 #F5F4F4;
border-radius: 10px;
padding: 45px 70px;
width: 50%;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.side-by-side-slider .ss-slide-left {
left: -33.3333333%;
}
.side-by-side-slider .ss-slide.active {
left: 25%;
opacity: 1;
}
.col-md-push-10 {
left: 83.33333333%;
}
The problem is that the parent (.side-by-side-slider) doesn't wrap around the children. I couldn't figure out how to do it without children being "position: absolute" since then I had alignment issues. I left out the slider JS code because for this problem it's not necessary. It's still a work in progress.
Any help is appreciated!

Answer 1

https://codepen.io/7ssan91/pen/RyjVNW you can use this slider with only Html and Css if you want to control of the height you should use media query https://www.w3schools.com/css/css_rwd_images.asp

Answer 2

I was just wondering if there was a pure CSS solution, but couldn't make one.
I ended up using jQuery to achieve this. More specifically this function:
makeChildHeight() {
let maxHeight = $('.side-by-side-slider .ss-slide').innerHeight() + 80;
Array.prototype.forEach.call($('.side-by-side-slider .ss-slide'), function(slide) {
if ($(slide).innerHeight() + 80 > maxHeight) {
maxHeight = $(slide).innerHeight() + 80;
}
});
$('.side-by-side-slider').css(
{'height': maxHeight}
);
}