<h3>writing-mode: horizontal-tb | vertical-rl | vertical-lr;</h3>
<div class="table">
    <div>
        <span class="horizontal-tb">Зразок<br> тексту.</span>
        <p>writing-mode: horizontal-tb</p>
    </div>
    <div>
        <span class="vertical-rl">Зразок<br> тексту.</span>
        <p>writing-mode: vertical-rl</p>
    </div>
    <div>
        <span class="vertical-lr">Зразок<br> тексту.</span>
        <p>writing-mode: vertical-lr</p>
    </div>
</div>
body{
    position: relative;
    margin: 0px;
    padding: 20px;
    font-family: "Arial";
    font-size: 18px;
}
h3{margin-top: 0px; color: #555; text-align: center;}
.table{
    display: table;
    width: 100%;
    height: 100%;
    min-height: 200px;
    position: relative;
    box-shadow: 0px 0px 2px #999;
}
.table div{
    display: table-cell;
    position: relative;
    background: white;
    vertical-align: middle;
    height: 300px;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    box-shadow: inset 0px 0px 2px #999;
}
span{
  display: inline-block;
  background: white;
  padding: 20px 15px;
  color: black;
  border: 1px dashed blue;
}

.horizontal-tb{
    riting-mode: horizontal-tb
}
.vertical-rl{
    writing-mode: vertical-rl;
}
.vertical-lr{
   writing-mode: vertical-lr;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.