<section>
  <article>
    <div dir="ltr">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>dir="ltr"</code></pre>
  </article>
  
  <article>
    <div dir="rtl">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>dir="rtl"</code></pre>
  </article>
  
  <article>
    <div class="vertical-lr">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>vertical-lr</code></pre>
  </article>
  
  <article>
    <div class="vertical-rl">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>vertical-rl</code></pre>
  </article>
</section>
article {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}

div {
  height: 100px;
  background: #e7e7e7;
  padding: 20px;
}

p {
  background: #d9d0e0;
  line-height: 1.5em;
}

pre {
  padding: 20px;
}

article pre {
  background: #30353b;
  color: white;
  font-size: 0.8em;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

section {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

header {
  margin: 20px;
}

body {
  font-family: -apple-system, system-ui, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif;
}

* {margin: 0; padding: 0;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.