Edit in JSFiddle

<div class="green">
  <div class="gray">
    <div class="blue"></div>
    <div class="red"></div>
    <div class="yellow"></div>
  </div>
</div>

$width: 50px;
$height: 50px;

* {
  margin: 0;
  padding: 0;
}

.green {
  width: 100%;
  height: 100%;
  background-color: green;
}

.gray {
  width: $width * 4;
  height: $height * 4;
  background-color: gray;
  position: relative;
  left: 50px;
}

.blue {
  width: $width;
  height: $height;
  background-color: blue;
}

.red {
  width: $width;
  height: $height;
  background-color: red;
  position: absolute;
  left: 10px;
  top: 20px;
}

.yellow {
  width: $width;
  height: $height;
  background-color: yellow;
}