JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MyClass Group" id="page"><!-- column -->
   <div class="MyClass" id="unkown100"><!-- simple frame --></div>
   <div class="MyClass" id="unkown101"><!-- simple frame --></div>
   <div class="MyClass" id="unkown102"><!-- simple frame --></div>
  </div>

CSS

#unkown100 {
    z-index: 4;
    width: 300px;
    height: 267px;
    background-color: #0071BC;
    position: relative;
    }
    
#unkown101 {
    z-index: 3;
    width: 400px;
    height: 267px;
    background-color: #29ABE2;
    margin-top: 79px;
    position: relative;
}

#unkown102 {
    z-index: 2;
    width: 500px;
    height: 267px;
    margin-top: 79px;
    background-color: #22B573;
    position: relative;
    }

JavaScript

function calc_size() {
	var percent = $('.MyClass').width() / $(document).width() * 100;
  var divWidth = $('.MyClass').width(percent + '%');
	$('.MyClass').css(divWidth);
}

$(document).ready(function() {
	calc_size();
});