<!DOCTYPE html>
<style>
html, body {
  margin: 0;
}

.border {
  border:1px solid #000;
}
.width-50 {
  width: 50%;
}
.flex {
  display: flex;
  flex-flow: row wrap;
}
.tall {
  height: 300px;
}
.top-50 {
  position: relative;
  top: 50%;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.border')">
<div class="border">
  <div class="flex">
    <div class="width-50">
      <label class="top-50" data-offset-y="151">This should be in the center of the container</label>
    </div>
    <div class="width-50">
      <div class="tall">
        This is tall
      </div>
    </div>
  </div>
</div>