Make child container fixed relatively to parent div(with non-fixed height)

Question

By default, when user opens my page he can see only " imagecontainer " div with images and " imagebutton " has status " selected ".

When user clicks on " Videos " button, I make " Videos " button selected, hide " imagecontainer " and show " videocontainer ".

The problem is, that my “ maincontainer ” height is not fixed. When user switches from videos to images, back and force, and since images and videos are sometimes different in sizes , my “ button-row ” shifts also up and down. Making experience inconsistent.

I am not allowed to change " maincontainer " width , change it's properties or position or add something to this layout. I can only change " videocontainer " or “ button-row ”.

I tried to make my " button-row " with absolute position and give to it " bottom:0 " to stick it to the bottom of parent container. However it didn't worked.

Is there any workarounds? Can I do it through jquery? Somehow capture initial height of maincontainer . And then, if user clicks Videos button, force maincontainer to have the same height that I captured on initial page load (when Image button is selected)

<div id=“maincontainer”>
    <div>Some data</div>
    <div id = "imagecontainer"> My image is here</div>
    <div id = "videocontainer"> My video is here</div>
    <div id = “button-row”>
        <button id=“imagebutton” class="selected" type="button">Image</button> 
        <button id=“videobutton” type="button">Video</button> 
    </div>
</div>

Css for main container:

#maincontainer{
    position: relative;
    width: 350px;
}

Answer 1

Would this work (untested)

$(document).ready(function() {
    if($("#imagecontainer").height() > $("#videocontainer").height()) {
        $("#videocontainer").height($("#imagecontainer").height());
    } else {
        $("#imagecontainer").height($("#videocontainer").height());
    }
});