縦書きで右から左に並べたい

前提

縦書きで、複数の「div」「dl」要素が左から並んでしまいます。
左から縦書きでnews,お知らせ、dlタグのお知らせの内容を並べたいです。

模写のお手本↓
https://xd.adobe.com/view/0e24b0e3-a160-4f60-90da-3fd37fe8cfd8-5b77/specs/?hints=off

該当のソースコード

html
1
2 <div class="container">  
3        <section id="area-news"> 
4            <div class="news-container">
5                <div class="head-news">
6                    <h2 class="ttl ttl-news"><span class="english">News</span><span class="japanese">お 知 ら せ</span></h2>
7                </div>
8                    <dl class="news-wrapper">
9                           <dt>2020.12.22</dt><dd>ホームページをリニューアルしました。</dd>
10                           <dt>2020.11.22</dt><dd>【季節限定】米ころんを発売いたしました。</dd>
11                           <dt>2020.8.28</dt><dd>【店舗受取】十三夜お月見団子、予約受付中です。</dd>
12                           <dt>2020.5.4</dt><dd>【春限定】桜葉が香る、春の訪れを感じる「桜どら焼き」、完売しました！</dd>
13                           <dt>2020.4.7</dt><dd>【おすすめ】 端午の節句に家族団らん！鯉のぼりと信玄餅セット、販売しました！</dd>
14                    </dl>
15            </div><!-- news-container -->
16        </section><!-- area-news -->

css
1/* お知らせ
2----------------------------------*/	
3main {
4    background-color: #E6E2D7;   
5    margin-top: 100vh;
6}
7.news-container {
8    text-align: right;
9}
10.head-news,
11.news-wrapper{
12   display: inline-block;
13   -ms-writing-mode: tb-rl;
14   -webkit-writing-mode: vertical-rl;
15   writing-mode: vertical-rl;
16}
17
18
19.news-wrapper > dt + dd {
20    border-left: 1px solid #000000;
21    gap:5px;
22   
23}
24.news-wrapper > dt {
25    font-size: 9px;
26    padding-right: 30px;
27    padding-top: 30.5px;
28    padding-bottom: 30.5px;
29}
30
31.news-wrapper > dd {
32    height: 261px;
33    font-size: 16px;
34    padding-left:30px;
35    padding-top: 30.5px;
36    padding-bottom: 30.5px;
37}
38
39.news-wrapper {
40   
41    border-right: 1px solid #000000;
42    margin-top: 275.5px;
43}
44.ttl {
45    font-size: 36px;
46    letter-spacing: 0;
47    font-weight: 400;
48    -ms-writing-mode: tb-rl;
49	-webkit-writing-mode: vertical-rl;
50    writing-mode: vertical-rl;
51}
52.japanese {
53    display: block;
54    margin-right: 15px;
55    margin-top: 18px;
56}
57.english {
58    font-size: 0.875rem;
59    display: block;
60}
61.ttl-news {
62    padding-top: 180px;
63}
64
65.head-sweets-A > img,
66.head-sweets-B > img  {
67    width: 45%;
68}
69.head-sweets-A > p ,
70.head-sweets-B > p {
71   color: #fff;
72   width: 128px;
73   padding: 50px 115px;
74}
75.head-sweets-A > p {
76    background-color: #F9E90699;
77    opacity: 0.8;
78} 
79.head-sweets-B > p {
80    background-color: #952A2699;
81    opacity: 0.8;
82}
83
84/* コンテンツ 	
85----------------------------------*/	
86/* ショップ 	
87----------------------------------*/	
88#shop {
89    position: relative;
90    padding-bottom: 32.14%; 
91    height: 0;
92    overflow: hidden;
93    }
94iframe {
95position: absolute;
96top: 0;
97left: 0;
98width: 100% !important;
99height: 100% !important;
100vertical-align: bottom;
101padding-bottom: 0;
102}
103
104/* フッター	
105----------------------------------*/	
106footer {
107    background-color: #000;
108    height: auto;
109    font-family: 'Noto Serif JP', serif;
110}
111
112.footer-container {
113    display: flex;
114    flex-direction: row-reverse;
115    padding-top: 80px;  
116}
117.area-logo-footer > h1,
118.nav-footer {
119    margin-left: auto;
120}
121.area-logo-footer > h1 {
122    margin-left: 60.04px;
123    padding-right: 80px;
124}
125.adress {
126    color: #fff;
127    -ms-writing-mode: tb-rl;
128	-webkit-writing-mode: vertical-rl;
129    writing-mode: vertical-rl; 
130    font-size: 14px;
131    margin-left: 60px;
132    gap:7px;
133    letter-spacing: 0px;
134}
135.nav-footer {
136    -ms-writing-mode: tb-rl;
137	-webkit-writing-mode: vertical-rl;
138    writing-mode: vertical-rl; 
139}
140.footer-botton-store {
141    color: #fff;
142    -ms-writing-mode: tb-rl;
143	-webkit-writing-mode: vertical-rl;
144    writing-mode: vertical-rl; 
145    font-size: 14px; 
146}
147.footer-botton-store {
148    display: block;
149    padding-left: 30px;
150}
151
152.wrapper > p {
153    color: #fff;
154    font-size: 10px;
155    text-align: center;
156    padding-bottom: 30px;
157    margin-top: 10px;
158}
159
160/* レスポンシブ対応 */
161@media (max-width:768px) {
162    /* ヘッダー */
163    .header{
164    background-position: 30% bottom;
165    }
166    .area-logo-header > h1{
167        margin-left: 5%;  
168        margin-right: 5%; 
169    }
170    .botton-store {
171        left: 18px;
172    }
173    /* お知らせ */
174    /* コンテンツ */
175    /* ショップ */
176    /* フッター */
177    .area-logo-footer > h1 {
178        margin-left: 5%;
179        padding-right: 30px;
180    }
181    .adress {
182        margin-left: 30px;
183    }
184    .list-nav-header {
185        margin: 0 -8px;
186    }
187    .list-nav-header > li{
188        padding: 0 8px;
189    }
190}

試したこと

https://miyattiblog.com/vertical-layout/
の複数の「p」要素が左から並んでしまう問題の部分を
参考に変更したのですが、うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

質問の説明ではよく分からないので、「模写のお手本」のレイアウトになるように回答します。

writing-mode は子孫要素に継承するので、親要素(.news-container)にだけ設定すればいいです。
また、縦書きでtext-align: right;を設定すると下端揃えになってしまいますので、これは削除してください。

また、.news-containerブロック全体を右寄せするには、margin-left: auto;を設定します。

あと、dd要素には既定のマージンがありますので、それをリセットします。

上記を考慮して、あと、適当に余白を調整して、下記のようなCSSで模写手本に近いレイアウトになります。
細かいサイズ、余白等はご自身で調整してください。

css
1/* お知らせ
2----------------------------------*/
3.news-container {
4  -ms-writing-mode: tb-rl;
5  -webkit-writing-mode: vertical-rl;
6  writing-mode: vertical-rl;
7  margin-left: auto; /* ブロック右寄せ */
8}
9.news-wrapper > dt + dd {
10  border-left: 1px solid #000000;
11}
12.news-wrapper > dt {
13  font-size: 9px;
14  padding-right: 30px;
15  padding-top: 30.5px;
16  padding-bottom: 30.5px;
17}
18
19.news-wrapper > dd {
20  height: 300px;
21  font-size: 16px;
22  padding-left: 30px;
23  padding-top: 30.5px;
24  padding-bottom: 30.5px;
25  margin-top: 0; /* 既定のマージンをリセット */
26}
27
28.news-wrapper {
29  border-right: 1px solid #000000;
30  margin-top: 275.5px;
31}
32.ttl {
33  font-size: 36px;
34  letter-spacing: 0;
35  font-weight: 400;
36}
37.japanese {
38  display: block;
39  margin-right: 15px;
40  margin-top: 18px;
41}
42.english {
43  font-size: 0.875rem;
44  display: block;
45}
46.ttl-news {
47  padding-top: 180px;
48  padding-left: 80px;
49}