JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circles"></div>

CSS

.circle {
  box-sizing: border-box;
  margin: 0.1%;
  width: 0.8%;
  border: 1px solid #aaa;
  border-radius: 50%;
  float: left;
}

JavaScript

console.clear();
(function() {
  window.onresize= function() {
    var div = document.querySelector('#circles');
    circle.style.height= div.childNodes[0].offsetWidth+'px';
  }

  var styleSheets = document.styleSheets,
      circle,
      i, j;

  for(i = 0 ; i < styleSheets.length ; i++) {
    rules= styleSheets[i].rules ||
           styleSheets[i].cssRules;
    for(j = 0 ; j < rules.length ; j++) {
      if(rules[j].selectorText==='.circle') {
        circle= rules[j];
        break;
      }
    }
  }
})();

function makeCircles() {
  var x, y, 
      circle,
      div = document.querySelector('#circles');

  for(x = 1 ; x <= 100 ; x++) {
    for(y = 1 ; y <= 100 ; y++) {
      circle= document.createElement('div');
      circle.className = 'circle';
      div.appendChild(circle);
    }
  }
} //makeCircles

makeCircles();

window.onresize();