<div class="box Horizontal-tb">
Horizontal-tb
</div>
<div class="box Vertical-lr">
Vertical-lr
</div>
<div class="box Vertical-rl">
Vertical-rl
</div>
body {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 1em;
padding: 2em;
}
.box {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-basis: 17%;
height: 200px;
border-inline-start: 5px solid red;
}
.Horizontal-tb{
writing-mode: horizontal-tb;
}
.Vertical-lr {
writing-mode: vertical-lr;
}
.Vertical-rl {
writing-mode: vertical-rl;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.