Scalabe circle with pure CSS

index.html

<div class="wrap">
  <div class="left">
    <div class="box-container-outer">
      <div class="box-container">
        <div class="box">
          <div class="center-vertical">A</div>
        </div>
      </div>
    </div>
    Left Content Area
  </div>
  <div class="right">Right Content Area</div>
</div>

  <style>
  .wrap {
   max-width: 980px;
   margin: 0 auto;
 }
 .left, .right {
   float: left;
   border: 2px dotted #eee;
   padding: 15px;
 }
 .left {
   width: 16%;
 }
 .right {
   width: 84%;
 }

 .box-container-outer {
  max-width: 100px;
}
.box-container {
  position: relative;
  width: 100%;
  background: pink;
  padding-bottom: 100%;
  border-radius: 50%;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
}
.center-vertical {
	text-align: center;
	color: #fff;
  font-size: 55px;
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
</style>