JSFiddle - React, Tailwind, and code Playground
by Mottie
HTML
This example uses borders to make it more visible than the margin.<br>
<br>
<div id="wrapper"></div>
CSS
.box {
display: block;
height: 50px;
width: 30px;
margin: 1px;
padding: 10px;
border: #777 10px solid;
float: left;
text-align: center;
font-size: 120%;
}
.noSide {
border-color: #999;
border-right: 0;
}
.noSide + div { clear: left; }
.close {
float: right;
font-size: 40%;
cursor: pointer;
}
JavaScript
$(document).ready(function() {
// build demo boxes
var boxes = 15,
t = '';
for (i = 0; i < boxes; i++) {
t += '<div class="box"><div class="close">X</div><br>' + (i + 1) + '</div>';
}
$('#wrapper').append(t);
$('.box:visible:nth-child(5n+5)').addClass('noSide');
$('.close').click(function() {
// needs to be removed or detached because the nth child
// appears to ignore hidden elements
$(this).parent().detach();
$('.noSide').removeClass('noSide');
$('.box:visible:nth-child(5n+5)').addClass('noSide');
});
});