<div class="container">
  <div class="corner item">
    First
  </div>
  <div class="corner item">
    Second
  </div>
  <div class="corner item">
    Third
  </div>
  <div class="corner item">
    Fourth
  </div>
</div>
.item {
  background: skyblue;
  border: 0.5px solid black;
}

.container {
  border: 2px solid black;
  height: 100px;
  width: 200px;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  align-items: start;
  justify-items: start;
}

.corner:nth-child(2),
.corner:nth-child(4) {
  justify-self: end;
}

.corner:nth-child(3),
.corner:nth-child(4) {
  align-self: end;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.