JSFiddle - React, Tailwind, and code Playground

C Layout

by Christopher O

HTML

<div class="squarebubble topbubble">🍎 Apples are good for you</div>
<div id="main">
  <div class="squarebubble mainIn" id="lefty">🍌 Bananas are amazing fruit!</div>
  <div class="squarebubble mainIn" id="righty">🍒 Cherries taste delicious!</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; /* default. will resize automatically */
  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;
}
#lefty{
  /*font-size:2vw;*/
}

JavaScript

(function () {
    var useElm;
    var startOffset;
    var main = document.getElementById("main");
    var lefty = document.getElementById("lefty");
    var righty = document.getElementById("righty");
    var info = document.getElementById("info");
    //var leftyPct = 1/3; // Percentage lefty should use
    var leftyMinPx = 200;
    var precision = 100; // total number of grid units

    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.style.border = '1px solid #ccc'; // testing
    grip.addEventListener('mousedown', function (e) {
        useElm = lefty;
        startOffset = lefty.offsetWidth - e.pageX;
    });

    lefty.appendChild(grip);


    document.addEventListener('mousemove', function (e) {
      if (useElm) {
        leftWidthPx = startOffset + e.pageX;        
        rightWidthPx = righty.offsetWidth;
        
        totalWdth = leftWidthPx + rightWidthPx;
        
        pxPerUnit = totalWdth/precision;
        leftUnits = Math.round(leftWidthPx/pxPerUnit);
        rightUnits = precision - leftUnits;
        
        // Require minimum width
        if(leftWidthPx < leftyMinPx){
          return;
        }
               
        main.style.gridTemplateColumns = leftUnits + 'fr '+ rightUnits +'fr'; // set grid width by units
        
        elasticFont(lefty,20,12,20); // element, pct, minpx, maxpx
        elasticFont(righty,20,12,20);
        
        info.innerHTML = 
        'precision (total units): ' + precision + '<br>' +
        'totalWdth: ' + totalWdth + '<br><br>' + 
        
        'pxPerUnit: ' + pxPerUnit + '<br>' + 
        'leftUnits: ' + leftUnits + ' (' + Math.round(leftUnits*pxPerUnit) +'px vs '+ lefty.offsetWidth +') <br>' + 
        'rightUnits: ' + rightUnits + ' (' +...