CSS: How can I always output an element square?

As is well known, there are always several ways to achieve a goal using CSS. Two solutions are shown below, one quite simple and one somewhat more complex.

aspect-ratio: 1;

or

.square {
  position: relative;
  width: 50%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}