<div class="container">
  <header>
    <h1>This is a vertical layout</h1>
  </header>
  <main>
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>
  </main>
</div>

html {
    writing-mode: vertical-rl;
}

.container {
  display: grid;
  grid-template-rows: min-content 1fr;
}

header {
  background: MediumTurquoise;
}

header, main {
  padding: 2rem;
}