JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="elements">
<div id="holder"></div>
</div>
<div id="clear"></div>
</body>
</html>

CSS

.wrapper {
    z-index:0;
    position:relative;
    float:left;
    margin:25px;                
    width: 180px;
    height: 100px;
    background: black;
    color:white;
}
.elements{
    position:absolute;    
    left: 0%;
    width: 75%;
  background: #134;


}

JavaScript

$(document).ready(function(){
var marginSize;
var x=($('.elements').width());
var pane=230;      //pane is the fixed size of the .wrapper (width+(2*padding)+min margin wanted)
var y;             //the number of whole "pane"s that can fit in .elements

y=Math.floor(x/pane); //Sets y to number of whole panes
marginSize=(x-(pane*y))/(2*y)+20; //Sets marginSize


    function checkMe(id){
        var val=$('#link_'+id).css('margin-left');
        alert('10');
    }
    
for(var i=0;i<7;i++){//makes seven .wrapper divs for the example
    $('<div id="link_'+i+'">')
        .addClass('wrapper')
                    
        .css({
            'margin-left':marginSize,//sets left margin to marginSize

            })        
        .html(i+'<button onclick="checkMe(10)">check'+i+'</button>')
        .appendTo('#holder');//appends to #holder div within the .elements div
}    
    


$(window).resize(function() {       //on resize we...
    x=$('.elements').width();   //new width means new x
    y=Math.floor(x/pane);       //new x means new y
    marginSize=(x-(pane*y))/(2*y)+20;  //set margineSize with new params
                    
    $('.wrapper')
        .css({
            'margin-left':marginSize,  //change left margin on resize

            });
});                
});