第2弾【CSS・レスポンシブ】日付とカテゴリとタイトルを横並びにして新着情報を作る

<section class="news_container">
<h2 class="news_title">お知らせ</h2>
<div class="news_list">
<ul>
<li>
<span class="date">2021.00.00</span>
<a href="#"><span class="category">長いカテゴリ</span></a>
<span class="news_text"><a href="#">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></span>
</li>
<li>
<span class="date">2021.00.00</span>
<a href="#"><span class="category">カテゴリ</span></a>
<span class="news_text"><a href="#">テキストが入ります。テキストが入ります。</a></span>
</li>
<li>
<span class="date">2021.00.00</span>
<a href="#"><span class="category">長いカテゴリ</span></a>
<span class="news_text"><a href="#">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></span>
</li>
<li>
<span class="date">2021.00.00</span>
<a href="#"><span class="category">カテゴリ</span></a>
<span class="news_text"><a href="#">テキストが入ります。テキストが入ります。</a></span>
</li>
</ul>
</div>
<p class="news_btn"><a href="#" class="btn">一覧を見る</a></p>
</section>

.news_container {
width: 90%;
max-width:1000px;
margin: 50px auto;
}
.news_title {
color: #24b224;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.news_list {
margin: 20px 0;
border-top: 1px dashed #24b224;
}
.news_list li {
padding: 15px 5px;
border-bottom: 1px dashed #2eb087;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.date {
font-size: 16px;
margin-right: 10px;
}
.category {
display: inline-block;
color: #fff;
width: 120px;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #75b46e;
}
.news_text a {
color: #333;
}

.news_btn {
text-align: center;
margin-top: 50px;
}
.news_btn a {
color: #75b46e;
}
.btn {
color: #75b46e;
padding: 10px 50px;
background: #fff;
border: 2px solid #75b46e;
border-radius: 50px;
transition: all 0.5s;
}
.btn:hover {
color: #fff;
background: #75b46e;
}
.btn:after {
font-family: 'Font Awesome 5 Free';
content: "\f0da";
font-weight: 900;
padding-left: 10px;
}

@media screen and (max-width: 559px) {
.news_container {
width: 100%;
padding: 0 20px;
}
.news_text a {
display: block;
margin-top: 10px;
text-overflow: ellipsis;
overflow: hidden;
}
}