JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<div class="tasks-layout__main">
  <div class="tasks-layout__content">
    Content
  </div>
  <div class="resizer"></div>
  <div class="tasks-layout__aside">
    aside
  </div>
</div>

CSS

.tasks-layout__main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    max-height: calc(100vh - 47px);
}

.tasks-layout__content {
  width: 60%;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.resizer {
      width: 1px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 1px;
    -ms-flex: 0 0 1px;
    flex: 0 0 1px;
    cursor: col-resize;
    background-color: #c4c4c4;
    position: relative;
}

.tasks-layout__aside {
  width: 40%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-transition: width 0.1s linear;
    transition: width 0.1s linear;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

JavaScript

const leftPanel = document.querySelector('.tasks-layout__content');
const rightPanel = document.querySelector('.tasks-layout__aside');
const leftPanelOffsetWidth = leftPanel.offsetWidth;
const rightPanelOffsetWidth = rightPanel.offsetWidth;

console.error('leftPanelOffsetWidth', leftPanelOffsetWidth);
console.error('rightPanelOffsetWidth', rightPanelOffsetWidth);

const resize = event => {
  const delta = Math.floor(event.clientX - clientX);
  const percentLeft = delta / leftPanelOffsetWidth * 100;
  const percentRight = delta / rightPanelOffsetWidth * 100;
  console.error('move', delta);

  leftPanel.style.width += percentLeft + '%';
  rightPanel.style.width -= percentRight + '%';
};

document.addEventListener('pointermove', resize);

document.addEventListener('pointerup', () => {
  document.removeEventListener('pointermove', resize);
}, { once: true });