JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div{
    float:left;
    background-color:moccasin;
    width:100px;
    height:100px;    
    border-bottom:1px solid tomato;
    border-right:1px solid tomato;
}
div:first-child{
    border-left:1px solid tomato;
}
div.first-row {
    border-top: 1px solid tomato;
}

JavaScript

var borderCollapse = function() {
var div = $('div');
var divWidth = 0;
var rows = 1;
div.each(function() {
    var that = $(this);
    var div = $('div');
    var width = div.parent().width();
    var thisWidth = $(this).width();
        
    if (divWidth < width) {    
        that.prev().not('div:first-child').css({'border-left':'0'});
        divWidth += parseInt(thisWidth);        
    } else { 
        that.prev().css({'border-left':'1px solid tomato'});
        divWidth = 2 * thisWidth;
        rows += 1;        
    }
    
    if (rows <= 1) {
        that.prev().addClass('first-row');
    } else {
        that.prev().removeClass('first-row');
    }
            
});
}

borderCollapse();

$(window).resize(function() {
    borderCollapse();
});