Overlapping elements within a square grid

Does anybody know how to overlap elements within a square grid by using Foundation 6?

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css">
<div class="row">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-8 columns end">
        <div class="square dark">
          <div class="content">test</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="small-6 small-offset-6 columns end">
        <div class="square light">
          <div class="content">test</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.square {
  background: #f00;
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dark {
  background: #cbcbcb;
}

.light {
  background: #dedede;
}