JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
    <div class="container span2"></div>
    <div class="container span2"></div>
</div>
<div class="column">
    <div class="container span1"></div>
    <div class="container span2"></div>
    <div class="container span1"></div>
</div>
<div class="column">
    <div class="container span4"></div>
</div>

CSS

body {
    margin:0;
    padding:0;
}
.column .container {
	float:left;
	margin:5px;
	min-width:100px;
	height:250px;
	background:#39F;	
}
	.column .container.span1 {
		width:calc(25% - 10px);	
		background:#6CC;
	}
	.column .container.span2 {
		width:calc(50% - 10px);	
		background:#6F6;
	}
	.column .container.span3 {
		width:calc(75% - 10px);	
		background:#99C;
	}
	.column .container.span4 {
		width:calc(100% - 10px);
		background:#33C;	
	}

JavaScript

// Grid Tiling Initialization
$(".column").sortable({
    connectWith: ".column"
});
$(".column").disableSelection();