JSFiddle - React, Tailwind, and code Playground

by Nadeesh Peiris

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="pro-modal-outer">
  <div id="pro-modal" class="pro-modal">
    <button onclick="generate()">
      generate
    </button>
    <div class="container">
      <div class="row">
        <div class="col col-6">
          
        </div>
        <div class="col col-6">
          
        </div>
      </div>
      <div class="row">
        <div class="col col-4">
          
        </div>
        <div class="col col-4">
          
        </div>
        <div class="col col-4">
          
        </div>
      </div>  
    </div>
  </div>
</div>

CSS

.pro-modal-outer {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pro-modal {
  background-color: #68acff;
  padding: 20px;
  width: 100%;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-4, .col-6 {
  border: solid 1px #6c757d;
  padding: 0px;
}

.field {
  background-color: #bbaabf;
  border: solid 3px #6c757d;
}

.size1 {
  width: 100px;
}

.size2 {
  width: 150px;
}

.size3 {
  width: 200px;
}

.size4 {
  width: 250px;
}

JavaScript

const promodal = document.getElementById('pro-modal');

function adjust(){
	
	const rows = promodal.getElementsByClassName('row');
	let maxWidth = 0;
  
  [...rows].map(function(row){
  	const fields = row.getElementsByClassName('field');
     
    [...fields].map(function(f){
    	//f.offsetWidth
      const colSize = f.parentElement.className.match(/col-\d/g)[0].substr(-1);
      const containerWidth = (f.offsetWidth+2)*(12/colSize)+40;
      console.log(`${f.offsetWidth} ${colSize} ${containerWidth}`);   
      maxWidth = Math.max(containerWidth, maxWidth)   
    });
  })
  
  promodal.style.width  = maxWidth+'px';
}

function generate(){
	promodal.style.width = "100%";
	const cols = promodal.getElementsByClassName('col');
  [...cols].map(function(col){
  	col.innerHTML = "";
    const colSize = col.className.match(/col-\d/g)[0].substr(-1);
  	for(let i=0; i<4; i++) {
    	const width = ~~(Math.random()*50*colSize);
      var field = document.createElement("div");
      field.innerHTML = "field";
      field.className = "field";
      field.style.width = width+"px";
      col.appendChild(field);
    }
  });
  
  setTimeout(adjust,3000);
}

generate();