Могу ли я использовать Flexbox Space Between, когда элементы находятся не на одной линии?

Question

Могу ли я justify-content:space-between, когда два флекс-элемента находятся на разных линиях?

Я бы хотел, чтобы это выглядело так

Я ошибочно предполагал, что space-between автоматически добавит их на каждой стороне где зеленые линии отмечают заполнение контейнера.

Я добавил некоторые отступы для каждого из детей, чтобы у них была небольшая передышка. Маржа влево для верха first-child и справа для second-child.

.dual-images__img-wrapper:first-child {
  margin-left: 6%;
}
.dual-images__img-wrapper:last-child {
  margin-right: 6%;
} 

Скрипка https://jsfiddle.net/wxvh5a6u/

* {
  margin: 0;
  padding: 0;
}

.dual-images {
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  flex-direction: row;
  padding-left: 10%;
  padding-right: 10%;
}
.dual-images__img-wrapper {
  position: relative;
  width: 60vw;
  margin-top: 12vw;
}
.dual-images__img-wrapper:first-child {
  margin-left: 6%;
}
.dual-images__img-wrapper:last-child {
  margin-right: 6%;
}
.dual-images__img-wrapper:before {
  content: " ";
  padding-bottom: 56.25%;
  display: block;
}
.dual-images__img-wrapper__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dual-images__img-wrapper__inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="dual-images">
    <figure class="dual-images__img-wrapper">
      <span class="dual-images__img-wrapper__inner">
        <img src="https://r-cf.bstatic.com/images/hotel/max1024x768/222/222636340.jpg">
      </span>
    </figure>
    <figure class="dual-images__img-wrapper">
      <span class="dual-images__img-wrapper__inner">
         <img src="https://r-cf.bstatic.com/images/hotel/max1024x768/222/222636340.jpg">
      </span>
    </figure>
</div>