Relative CSS position with calc

HTML

<div class="parent">
  <div class="map"></div>
  <div class="control"><button>CONTROL</button></div>
</div>

CSS

.map {
  width: 100%;
  height: calc(100vh - 2em);
  background-color: green;
}

.control {
  position: relative;
  left: auto;
  right: .5em;
  top: calc(-100vh + 2em + .5em);
}