JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class = "leftMenu"> lorem loerm daw d rem loerm lorem loerm lorem loerm lorem loerm lorem loerm </div>
<div class = "rightBlock">lorem</div>
<div class = "rightBlock"> right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content</div>
<div class = "rightBlock"> right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content</div>
<div class = "rightBlock"> right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content</div>
<div class = "rightBlock"> right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content right content</div>
</div>
CSS
.leftMenu {
width: 100px;
background: green;
display: inline-block;
padding: 10px;
margin: 0 10px 10px 0;
float: left;
}
.rightBlock {
background: #eee;
margin-bottom: 10px;
padding: 10px;
margin-left: 130px;
}
.rightBlock.last {
clear: left;
}
.rightBlock.nofloat {
float: none;
margin-left: 0;
}
JavaScript
$(function() {
var menuh = $('.leftMenu').height();
$('.rightBlock').each(function() {
if ($(this).offset().top + $(this).outerHeight() >= menuh)
{
$('.leftMenu').height($(this).offset().top+$(this).height());
$(this).nextAll().addClass('nofloat');
return false;
}
});
});