JSFiddle - React, Tailwind, and code Playground

HTML

<section id='works'>
  <section class='cols'>
    <article class='h_10'></article>
    <article class='h_50'></article>
    <article></article>
    <article class='h_30'></article>
    <article class='h_50'></article>
    <article></article>
    <article class='h_30'></article>
    <article class='h_30'></article>
    <article class='h_150'></article>
    <article></article>
    <article class='h_10'></article>
    <article class='h_10'></article>
    <article></article>
    <article></article>
    <article></article>
    <article class='h_50'></article>
    <article class='h_150'></article>
    <article class='h_50'></article>
    <article class='h_50'></article>
    <article class='h_30'></article>
  </section>
</section>

CSS

#content {
  display: block;
  background: green;
  width: 100%;
  height: 100px;
}

#works {
  display: block;
  width: 500px;
  background: red;
  margin: auto;
}

.cols {
  -webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;  
}

#works article {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
  margin: 10px;
}

#works article.h_10 {
  height: 10px;
}

#works article.h_30 {
  height: 30px;
}

#works article.h_50 {
  height: 50px;
}

#works article.h_150 {
  height: 150px;
}

JavaScript

$( function() {

	$( 'article' ).live( 'click', function() {
  
		var el = $( this );
		el.after( "new element" );

		var works = $( '#works' );
		var html = works.html();
		html = html.replace( /<[\/]section><section id=[\'\"]content[\'\"]><[\/]section><section class=[\'\"]cols[\'\"]>/ig, "" ).replace( /new element/ig, "</section><section id='content'></section><section class='cols'>" );
		works.html( html );
      
  } );

} )