Почему margin создаёт отступ не внутри родительского элемента?

Пример в codepen

Почему в данном примере "margin-top: 15vw;" создаёт отступ не от верхней границы родительского элемента "section-two", а от нижней границы "section-one"?

HTML

<section class="section section-one">
  
</section>

<section class="section section-two">
        <div class="section-two__description">
          description
        </div>
</section>

CSS

.section{
  position: relative;
  width: 100vw;
  height: 100vh;
}

.section-one {
  background-color: #fdc2c2;
}

.section-two {
  background-color: #8e7474;
  &__description {
    margin-top: 15vw;
  }
}