JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="container">
    <div class="side">
        <div class="img">1</div>
        <div class="img">2</div>
        <div class="img">3</div>
        <div class="img">4</div>
    </div>
    <div class="post">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia itaque quod voluptate modi beatae debitis ab vero accusamus nihil aut facere accusantium nisi alias iure vitae. Incidunt error hic fugiat!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia itaque quod voluptate modi beatae debitis ab vero accusamus nihil aut facere accusantium nisi alias iure vitae. Incidunt error hic fugiat!</p>
    </div>
</div>

CSS

.container {
    border: 1px solid red;
    height: 40px;
    overflow: auto;
}
.post {
    float: right;
     border: 1px solid blue;
    width: 60%;
}
.side {
    float: left;
    border: 1px solid blue;
    width: 40%
    margin-right: -2px;
}
.img {
    border: 1px solid green;
    width: 50px;
    height: 50px;
    display: none;
}
.img:first-child {
    height: 20px;
}
.img:last-child {
    height: 70px;
}

JavaScript

var totalHeight = 0;

$('.img').each(function(){
    
totalHeight += $(this).height();

console.log($('.container').height());
 console.log($(this).height());  
    
    if ($('.container').height() >= $(this).height()) {
       $(this).show();
    } 
});