Resizable square with css

HTML

<div class="square-container">
  <div class="square"></div>
</div>

CSS

.square-container {
  min-width:200px;
  width: 50%;
  margin: 0 auto;
  margin-top:7.5%;
}

.square {
  width: 100%;
  padding-bottom: 100%;
  background: #1ddecc;
  position: relative;
}

.square:before {
  /* content: "I'm a square even on window resize."; */
    content: "The point is using 'padding-bottom' with percentage, which refers to the **width** of itself.";

  position: absolute;
  top: 50%;
  left: 50%;
  color:#FFF;
  text-align: center;
  transform: translate(-50%, -50%);
}