JSFiddle - React, Tailwind, and code Playground

by peteng

HTML

<div class="container fixed">
    <div class="left">Left
    </div>
    <div class="right">Right
    </div>
    <footer>Footer</footer>
</div>

CSS

.fixed {position:fixed; left:100%;}
.container {
    position: relative;
}

.left {
    width: 400px;
    height: 400px;
    background-color: blue;
    opacity: 0.5;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 15;
    width: 300px;
    height: 500px;
    background-color: green;
    opacity: 0.5;
}

footer {
    width: 100%;
    height: 200px;
    background-color: pink;
    opacity: 0.5;
}

JavaScript

var productImgHeight = $('.left').outerHeight(),
     productInfoHeight = $('.right').outerHeight(),
     gap = productInfoHeight - productImgHeight;

    if (productImgHeight < productInfoHeight) {
        alert(productImgHeight);
        $('.left').css({"margin-bottom":gap+"px"});
    } else {
        $('.left').css({"margin-bottom":"0"});
    }


$('.container').hide().removeClass('fixed').fadeIn()