| <!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> |