Reponsive square CSS elements – Revised

style.scss

.squareWrapper {
  width: 50%;
  display: inline-block;  // Ensure that element is `inline-block`

  &:before {  // Ensure that pseudo-before element does not have any WIDTH property
    content: "";
    display: block;
    padding-bottom: 100%;
    float: left;
  }
}