JSFiddle - React, Tailwind, and code Playground

by Filipp Dernovoy

HTML

<div class="container">
</div>

CSS

.container {
  width: 710px;
  padding: 5px;
  border: 1px dashed #d00;
  min-height: 100px;
}

.row {
  display: table;
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed green;
  padding: 5px;
  margin: 0;
}

.col {
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  position: relative;
  padding: 5px 5px 5px 0;
  border: 1px dashed purple;
}

.col:first-child {
  left: 0;
  padding-left: 5px;
}

.col.empty::before {
  border-color: gray;
  background: none;
}

.col-1 {
  width: 50px;
}

.col-2 {
  width: 110px;
}

.col-3 {
  width: 170px;
}

.col-4 {
  width: 230px;
}

.col-5 {
  width: 290px;
}

.col-6 {
  width: 350px;
}

.col-7 {
  width: 410px;
}

.col-8 {
  width: 470px;
}

.col-9 {
  width: 530px;
}

.col-10 {
  width: 590px;
}

.col-11 {
  width: 650px;
}

.col-12 {
  width: 710px;
}

.block {
  background: lightblue;
  height: 50px;
}

JavaScript

var
  addBlock = function($block, width, shift) {
    var
      $row = getFreeRow(width, shift),
      $col = setCol($row, width, shift);
    if ($col) {
      $col.append($block);
    } else {
      return false;
    }
  },

  getFreeRow = function($container, width, shift) {
    var
    	$row,
      $rows = $container.find('> .row');
    $rows.each(function() {
    	
    });
    return addRow($container);
  },

  addRow = function($container) {
    var $row = $('<div class="row">');
    $container.append($row);
    return $row;
  },

  setCol = function($row, pos, width) {
  	var $col = $('<div class="col col-' + width + '">');
    $row.append($col);
    return $col;
  };

addBlock($('<div class="block">'), 3, 3);