<div class = "calculator">
  <input type="text" value="0" class="calc-field"></input>
  <div class = "row">
    <div class="col-3-of-4">
      <button type="button" class="btn btn-clear">C</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn btn-divide">/</button>
    </div>
  </div>
  <!--///////////////////////-->
  <div class = "row">
    <div class="col-1-of-4">
      <button type="button" class="btn">1</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn">2</button>
    </div>
    <div class="col-1-of-4" class="btn">
      <button type="button" class="btn">3</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn btn-multiply">X</button>
    </div>
  </div>
  <!--////////////////////////-->
  <div class = "row">
    <div class="col-1-of-4">
      <button type="button" class="btn">4</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn">5</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn">6</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn btn-minus">-</button>
    </div>
  </div>
  <!--////////////////////////-->
  <div class = "row">
    <div class="col-1-of-4">
      <button type="button" class="btn">7</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn">8</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn">9</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn btn-add">+</button>
    </div>
  </div>
  <!--////////////////////////-->
  <div class = "row">
    <div class="col-3-of-4">
      <button type="button" class="btn">0</button>
    </div>
    <div class="col-1-of-4">
      <button type="button" class="btn btn-equal">=</button>
    </div>
  </div>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.calculator{
  font-size:24px;
  text-align:center;
  padding:10px 0;
  border-radius:4px;
  background:white;
  box-shadow: 0 0 40px rgba(0,0,0,.15);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  
}

.row{
  width: 90%;
  margin:10px auto;
}
.row:not(:last-child){
  margin-bottom:10px;
}
.row::after {
    content: "";
    clear: both;
    display: table;
 }
[class^="col-"] {
  float: left;
}
[class^="col-"]:not(:last-child){
    margin-right:10px;
}
.col-1-of-4{
    width:calc((100% - 30px)/4);
}
.col-3-of-4{
  width:calc((3*(100% - 30px)/4) + 20px);
}
input{
  border:none;
  background:#58B19F;
  height:50px;
  width:90%;
  border-radius:4px;
  margin:10px auto;
  color:white;
  padding:0 10px;
}
input:focus{
  outline:none;
}
.btn{
  width:100%;
  padding:10px;
  color:#2d3436;
  background:white;
  border:none;
  border-radius:3px;
  box-shadow:0 15px 16px rgba(0,0,0,0.15);
  cursor:pointer;
}
.btn:focus{
  outline:none;
}
.btn:active{
  transform:translateY(4px);
}
.btn-clear{
  background:#7d5fff;
  color:white;
}
.btn-equal,.btn-add,.btn-minus,.btn-multiply,.btn-divide{
  color:white;
  background:#e84118;
}