JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

#container {
  border: 1px solid #2196f3;
  width: 400px;
  height: 400px;
}

div {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  border: 1px solid #f33;
  width: 50%;
  flex-wrap: wrap;
}

JavaScript

document.querySelector('body').addEventListener('click', (e) => {
  if (!e.target.matches('div')) {
  	return;
  }
  for (let i=0; i<=3; i++) {
  	e.target.appendChild(document.createElement('div'));
  }
})