<div class="tategaki-wrap">
    <div class="tategaki">
        <h2 class="tategaki__title">CSSで縦書きデザインをやってみる！</h2>
        <p>
        親譲りの無鉄砲で小供の時から損ばかりしている。<br>
        小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。<br>
        なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。<br>
        新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、<br>
        そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。<br>
        小使に負ぶさって帰って来た時、おやじが大きな眼をして<br>
        二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、<br>
        この次は抜かさずに飛んで見せますと答えた。（青空文庫より）                   
        </p>
    </div><!--tategaki-->
</div><!--tategaki-wrap-->

.tategaki-wrap{
    border: 1px solid red;
    margin: 0 auto;
    width: 1080px;
}
 
.tategaki{
    background: yellow;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;   
}
 
.tategaki__title{
    color: #333;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
}

<div class="tategaki-wrap">
    <div class="tategaki">
        <div class="box mixed">
            <h2 class="tategaki__title">CSSで縦書きデザインをやってみる！</h2>
            <p>
            こちらには初期値の「text-orientation: mixed;」を設定しています。<br>
            「text-orientation」プロパティは、Safariには<br>
            「-webkit」つけないと反映されませんので注意！
            </p>
        </div><!--mixed-->
        <div class="box upright">
            <h2 class="tategaki__title">CSSで縦書きデザインをやってみる！</h2>
            <p>
            こちらには「text-orientation: upright;」を設定しています。<br>
            「text-orientation」プロパティは、Safariには<br>
            「-webkit」つけないと反映されませんので注意！
            </p>
        </div><!--upright-->
        <div class="box sideways">
            <h2 class="tategaki__title">CSSで縦書きデザインをやってみる！</h2>
            <p>
            こちらには「text-orientation: sideways;」を設定しています。<br>
            「text-orientation」プロパティは、Safariには<br>
            「-webkit」つけないと反映されませんので注意！
            </p>
        </div><!--sideways-->
    </div><!--tategaki-->
</div><!--tategaki-wrap-->

.tategaki-wrap{
    border: 1px solid red;
    margin: 0 auto;
    width: 1080px;
}
 
.tategaki{
    background: yellow;
    padding: 20px;
    width: 100%;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;   
}
 
.tategaki__title{
    color: #333;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
}
 
.box{
    margin-left: 60px;
}
 
 
.mixed{
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
}
 
.upright{
    -webkit-text-orientation: upright;
    text-orientation: upright;
}
 
.sideways{
    -webkit-text-orientation: sideways;
    text-orientation: sideways;
}

<div class="tategaki-wrap">
    <div class="tategaki">
        <h2 class="tategaki__title">縦中横をやってみる！</h2>
        <p>
        縦中横（たてちゅうよこ）は、縦組みの文書の中で横組みすることである。<br>
        読みは「たてちゅうよこ」であり、「たてなかよこ」ではない（JIS X 4051で規定）。<br>
        縦組みの行の中で数文字（通常2、3文字。まれに4文字以上）の欧字や数字を、<br>
        1文字分の高さで左横書きに配置する。（引用：「縦中横 - Wikipedia」）
        </p>
        <h2 class="tategaki__title">平成<span class="text-combine">29</span>年<span class="text-combine">12</span>月<span class="text-combine">31</span>日</h2>
        <h2 class="tategaki__title"><span class="text-combine">2017</span>年<span class="text-combine">12</span>月<span class="text-combine">31</span>日</h2>
    </div><!--tategaki-->
</div><!--tategaki-wrap-->

.text-combine{
    text-combine-upright: all;
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
}