JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

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

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

  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,
      br,
      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);
    }
    br= document.createElement('br');
    div.appendChild(br);
  }
} //makeCircles

makeCircles();

window.onresize();