<div id="sizer">
  <div id="square">
    <div id="circle"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #2c3e50;
}
body {
  padding: 10px;
}

#sizer {
  height: 100%;
  background-color: #34495e;
  resize: horizontal;
  overflow: hidden;
  // width: 100%;
  width: 200px;
  margin: 0 auto;
  
  position: relative;
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    text-align: center;
    content: "Resize me!";
    color: white;
    background-color: black;
    text-shadow: 0 0 2px black;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    z-index: 2;
  }
}

#square {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background-color: #2980b9;
}

#circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-width: 4px;
  border-color: #27ae60;
  border-style: solid;
  border-radius: 50%;
}