JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div id="log-data"></div>


<div class="box-parent">

  <div class="box size1x1">1</div>
  <div class="box size2x1">2</div>
  <div class="box size1x1">3</div>
  <div class="box size1x1">4</div>
  <div class="box size1x2">5</div>
  <div class="box size2x1">6</div>
  <div class="box size2x1">7</div>
  <div class="box size1x2">8</div>
  <div class="box size1x1">9</div>
  <div class="box size1x1">10</div>
</div>

SCSS

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: sans-serif;
  font-size: 14px;
}

#log-data {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 3px;
  background: #000;
  color: #fff;
  opacity: .4;
}

.box-parent {
  position: relative;
  background: yellow;
}

.box {
  display: block;
  position: absolute;
  background: green;
  box-shadow: inset 0px 0px 5px 3px orange;
  color: #fff;
  &.size1x1 { width:50px;height:50px; }
  &.size2x1 { width:100px;height:50px; }
  &.size1x2 { width:50px;height:100px; }
}

JavaScript

var logtemp = '';

var $boxParent = $('.box-parent');
var $box = $boxParent.find('.box');

var bstyle;
var pw = $boxParent.width();
var cur = 0;
var ph = [];

logtemp += '[parent:'+pw+']<br/>';

$box.each(function(i,b){
	var $b = $(b);
  var w = $b.width();
  var h = $b.height();
  
  if (cur+w<=pw) {
  	btop = 0;
    bleft = cur;
    cur = cur+w;
  } else {
  	$b.remove();
  }
  
  
  bstyle = 'top:'+btop+'px;left:'+bleft+'px;';
  $b.attr('style',bstyle);
  
  
  
  logtemp += '[i'+i+'w'+w+'h'+h+']<br/>';
});




$('#log-data').html(logtemp);