JSFiddle - React, Tailwind, and code Playground
CSS
<style>html {
display: grid;
min-height: 100%;
}
body {
margin: 0;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: min-content 1fr;
grid-auto-flow: row dense;
gap: 1em;
}
body>h1 {
margin: 0;
writing-mode: vertical-rl;
transform: scale(-1);
/* extra for curiosity*/
text-shadow: 0 calc(-100vh + 3.2rem) darkgreen;
animation: indent 3s infinite linear;
overflow: hidden;
white-space: pre;
height: calc(100vh - 3.2rem);
grid-column: 3;
font-size: 30em;
}
@keyframes indent {
to {
text-indent: calc(100vh - 3.2rem);
}