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