dividing the div

example of dividing the d

by spoike

HTML

<div class="container" style="width: 400px; height: 200px;">
  <div class="box" style="width: 400px; height: 200px;"></div>
</div>
Click to cut the div

CSS

body { background-color: darkslategray; color: white;}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  background-color: white;
}
.container > .box {
  display: inline-block;
  background-color: lightslategray;
  border-radius: 3px;
  box-sizing: border-box;
  border: 2px solid white;
}

JavaScript

document
	.querySelector('.container')
	.addEventListener('click', (evt) => {
    if (!evt.target.classList.contains('box')) {
      return;
    }
    const parent = evt.target.parentNode;
    const splitGroup = document.createElement('div');
    splitGroup.classList.add('container');
    parent.replaceChild(splitGroup, evt.target);
    const splitChildren = [evt.target, document.createElement('div')];
    const newWidth = Math.floor(Number(evt.target.style.width.replace('px', '')) / 2);
    const height = evt.target.style.height;
    splitChildren.forEach(el => {
    	el.style.width = newWidth + 'px';
      el.style.height = height;
      el.classList.add('box');
      splitGroup.appendChild(el);
    });
  });