JSFiddle - React, Tailwind, and code Playground

HTML

<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>

CSS

* { margin: 0; padding: 0}

body {
  margin: 10px
}

.el {
  width: 20px;
  height: 10px;
  margin-bottom: 2px;
  background-color: blue;
}

.group {
  float: left;
  margin-left: 2px;
}

.group:first-child {
  margin-left: 0px
}

JavaScript

var els = $(".el"),grp = 4, cnt = Math.ceil(els.length / grp), ind = 0;
for(var i = 0; i < cnt;i++) {
	els.slice(ind, ind += (i==cnt-2 ? 2 : grp)).wrapAll('<div class="group">');
}