Sorting randomly generated SVGs in descending size

Currently my javascript is this:

var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 100; i++) {
  var x = (Math.floor(Math.random() * 100) + 1)

  var rect = document.createElementNS(svgns, 'rect');
  rect.setAttributeNS(null, 'height', x);
  rect.setAttributeNS(null, 'width', x);
  rect.setAttributeNS(null, 'stroke-width', '5')
  rect.setAttributeNS(null, 'fill', 'red');
  rect.setAttributeNS(null, 'stroke', 'black');
  document.getElementById('svgSquare').appendChild(rect);
}

and my HTML is this :

<svg id="svgSquare"></svg>

This code displays the number of squares I want but it stacks them on top of each other with them all starting at the same point. How do I take the random squares made from this for loop and display them in stacked descending order. Unsure where to go at this point and not sure if I'm even asking the right question.