JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="main">
  <div id="row1">
    <span class="block1"></span>
    <span class="block1"></span>
    <span class="block1"></span>
    <span class="block1"></span>
    <span class="block1"></span>
  </div> 
   <div id="row2">
    <span class="block2"></span>
    <span class="block2"></span>
    <span class="block2"></span>
    <span class="block2"></span>
    <span class="block2"></span>
  </div>   
</div>

CSS

#main {
    width:240px;
}
#row1{
    float:left;
}
#row2{
    float:right;
    overflow:hidden;
}
.block1{
    display:block;
    margin:5px;
    width:100px;
    height:50px;
    border:1px solid red;
}
.block2{
    display:block;
    margin:5px;
    width:100px;
    height:100px;
    border:1px solid red;
}

JavaScript

//make sure you execute this script onload inside a jquery document ready or window.onload

//get the rendered height of both rows
//enter margin for blocks here
//this also assumes that the height of your block1 and block2 elements are fixed
var margin = 5;
var rowOneHeight = document.getElementById('row1').offsetHeight;
//get height of block2 element including vertical margin (multiplied twice)
var blockTwoHeight = document.getElementById('row2').getElementsByClassName('block2')[0].offsetHeight+2*margin;
var howManyBlocksCanFit = Math.floor(rowOneHeight/blockTwoHeight);
var numberOfBlocks = document.getElementById('row2').getElementsByClassName('block2').length;
for(var i = 0; i != numberOfBlocks-howManyBlocksCanFit; i++){
    document.getElementById('row2').removeChild(document.getElementById('row2').lastElementChild);
}