<div class="warning">
  <h2>Feature is not supported</h2>
  <p>Your browser does not support sideways writing mode. View the Pen in Firefox.</p>
</div>

<div class="container">
  <div class='sideways-left'>
    <h2>Poem 6</h2>
    <p>I remember the way you were last autumn<br><br>
      You were the gray beret and a tranquil heart.<br><br>
      In your eyes, the flames of twilight tusseled<br><br>
      And the leaves were falling into the water of your soul.
  </div>

  <div class='sideways-right'>
    <h2>Poem 6</h2>
    <p>I remember the way you were last autumn<br><br>
      You were the gray beret and a tranquil heart.<br><br>
      In your eyes, the flames of twilight tusseled<br><br>
      And the leaves were falling into the water of your soul.
  </div>
</div>

<div class="container">
  <div class='vertical-left'>
    <h2>Poem 6</h2>
    <p>I remember the way you were last autumn<br><br>
      You were the gray beret and a tranquil heart.<br><br>
      In your eyes, the flames of twilight tusseled<br><br>
      And the leaves were falling into the water of your soul.
  </div>

  <div class='vertical-right'>
    <h2>Poem 6</h2>
    <p>I remember the way you were last autumn<br><br>
      You were the gray beret and a tranquil heart.<br><br>
      In your eyes, the flames of twilight tusseled<br><br>
      And the leaves were falling into the water of your soul.
  </div>
</div>

.warning {
  color: red;
  text-align: center;
  font-size: 125%;
}

@supports (writing-mode: sideways-lr) {
  .warning {
    display: none;
  }
}

@supports not (writing-mode: sideways-lr) {
  .warning {
    display: block;
  }
}

body {
  margin-block: 2em;
  magin-inline: 4em;
  font-family: "Raleway", serif;
  line-height: 1;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.sideways-left {
  writing-mode: sideways-lr;
  border-block: 2px solid green;
  border-inline: 2px solid magenta;
  padding-inline: 1em;
}

.sideways-right {
  writing-mode: sideways-rl;
  border-block: 2px solid green;
  border-inline: 2px solid magenta;
  padding-inline: 1em;
}

.vertical-left {
  writing-mode: vertical-lr;
  border-block: 2px solid green;
  border-inline: 2px solid magenta;
  padding-inline: 1em;
  margin-inline-start: 4em;
}

.vertical-right {
  writing-mode: vertical-rl;
  border-block: 2px solid green;
  border-inline: 2px solid magenta;
  padding-inline: 1em;
  margin-inline-start: 4em;
}