JSFiddle - React, Tailwind, and code Playground

C Layout

by Christopher O

HTML

<div class="squarebubble topbubble">A</div>
<div id="main">
  <div class="squarebubble mainIn" id="lefty">B</div>
  <div class="squarebubble mainIn">C</div>
</div>

<div id="info">Resize this panel to see grids respond</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

#main {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(14px, 1fr)); */
  grid-template-columns: minmax(200px, 10fr) 30fr;
  grid-gap: 10px;
}

.squarebubble{
  background-color: #fff;
  border-radius: 3px;
}

.mainIn {
  padding: 20px;
  font-size: 14px;
}

.topbubble{
  margin-bottom: 10px;
  padding: 10px;
  font-size: 14px;
}

#info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}

JavaScript

(function () {
    var thElm;
    var startOffset;
    var main = document.getElementById("main");
    var lefty = document.getElementById("lefty");
    var info = document.getElementById("info");

    /* Array.prototype.forEach.call(
      document.querySelectorAll("#lefty"),
      function (th) { */
       lefty.style.position = 'relative';
    
        var grip = document.createElement('div');
        grip.innerHTML = "&nbsp;";
        grip.style.top = 0;
        grip.style.right = 0;
        grip.style.bottom = 0;
        grip.style.width = '5px';
        grip.style.position = 'absolute';
        grip.style.cursor = 'col-resize';
        grip.addEventListener('mousedown', function (e) {
            thElm = lefty;
            startOffset = lefty.offsetWidth - e.pageX;
        });
    
        lefty.appendChild(grip);
      /* }); */

    document.addEventListener('mousemove', function (e) {
      if (thElm) {
      	newwidth = startOffset + e.pageX;
        thElm.style.width = newwidth + 'px';
        info.innerHTML = 'startOffset: ' + startOffset + '<br>' + 
        'e.pageX: ' + e.pageX + '<br>' + 
        'new width: ' + newwidth + '<br>'
        ;
      }
    });

    document.addEventListener('mouseup', function () {
        thElm = undefined;
    });
})();