Testing calc syntax

by mattslack

HTML

<div id="square">
  This div should be a square
</div>

CSS

#square {
  --side: 10rem;
  align-items: center;
  background: #911;
  color: #fee;
  display: flex;
  height: 5rem;
  height: calc(--side + 10rem);
  justify-content: center;
  width: 20rem;
}