<!DOCTYPE html>
<style>
body {
-webkit-writing-mode: vertical-rl;
}
.columns {
height: 340px;
width: 100px;
padding: 20px;
border: 10px solid maroon;
margin-right: 1em;
line-height: 20px;
}
.column {
height: 100px;
}
.left > div {
float: left;
}
.right > div {
float: right;
}
.rule {
width: 100px;
height: 2px;
background-color: black;
margin: 9px 0;
}
</style>
<div class="columns left">
<div class="column">
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
</div>
<div class="rule"></div>
<div class="column">
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
</div>
<div class="rule"></div>
<div class="column">
Column text.<br>
Column text.<br>
</div>
</div>
<div class="columns right" style="direction:rtl;">
<div class="column">
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
</div>
<div class="rule"></div>
<div class="column">
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
Column text.<br>
</div>
<div class="rule"></div>
<div class="column">
Column text.<br>
Column text.<br>
</div>
</div>