<div class="container">
  <header>
    <h1>This is a vertical heading</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>
  </main>
</div>
.container {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column-gap: 4rem;
}
header {
  writing-mode: vertical-lr;
  background: #f1f;
}
h2 {
  margin-block-start: 4rem;
}
h1 {
  margin-inline-start: 4rem;
  margin-block-start: 2rem;
  margin-block-end: 2rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.