お知らせ一覧　横2段　可変ラベル１つ

お知らせ一覧　仕様

2段で、上段は日付＋ラベル、下段はタイトル。

リンクは、ラベルはラベル別一覧、タイトルは記事詳細

レスポンシブ対応は両サイドの余白調節するだけで対応可能

HTMLのコード

<ul class="areaNews__newsList newsList">
  <li class="newsList__newsItem newsItem">
    <div class="newsItem__date">
      1915-XX-XX
    </div><!-- .newsItem__date -->
    <div class="newsItem__label label--bright1">
      <a class="newsItem__linkLabel" href="">
        新思潮波
      </a><!-- .newsItem__areaLabel -->
    </div><!-- .newsItem__label -->
    <div class="newsItem__title">
      <a class="newsItem__linkTitle" href="">
        芥川龍之介先生、「羅生門」を発表
      </a>
    </div><!-- .newsItem__title -->
  </li><!-- newsList__newsItem -->
  <li class="newsList__newsItem newsItem">
    <div class="newsItem__date">
      1911-XX-XX
    </div><!-- .newsItem__date -->
    <div class="newsItem__label label--bright1">
      <a class="newsItem__linkLabel" href="">
        白樺派
      </a><!-- .newsList__label -->
    </div><!-- .newsList__areaLabel -->
    <div class="newsItem__title">
      <a class="newsItem__linkTitle" href="">
        有島武郎先生、「或る女」を発表
      </a>
    </div><!-- .newsList__title -->
  </li><!-- newsList__newsItem -->
  <li class="newsList__newsItem newsItem">
    <div class="newsItem__date">
       1906-XX-XX
    </div><!-- .newsList__date -->
    <div class="newsItem__label  label--bright1">
      <a class="newsItem__linkLabel" href="">
        高踏派
      </a><!-- .newsList__label -->
    </div><!-- .newsList__areaLabel -->
    <div class=" newsItem__title">
      <a class="newsItem__linkTitle" href="">
         夏目漱石先生、「坊ちゃん」を発表
      </a>
    </div><!-- .newsList__title -->
  </li><!-- newsList__newsItem -->
  <li class="newsList__newsItem newsItem">
    <div class="newsItem__date">
      1888-09-08
    </div><!-- .newsItem__date -->
    <div class="newsItem__label label--bright3">
      <a class="newsItem__linkLabel" href="">
         速報
      </a><!-- .newsItem__label -->
    </div><!-- .newsItem__areaLabel -->
    <div class="newsItem__title">
       <a class="newsItem__linkTitle" href="">
         ドイツ留学をされていた森鴎外先生は、
         石黒田軍医監に従い7月5日にベルリンを出発、
         本日無事に横浜に到着されました。
         同時に陸軍医学者教官に任命されました。
       </a>
    </div><!-- .newsItem_title -->
  </li><!-- newsList__newsItem -->
  <li class="newsList__newsItem newsItem">
    <div class="newsItem__date">
      1887-XX-XX
    </div><!-- .newsItem__date -->
    <div class="newsItem__label label--bright1">
      <a class="newsItem__linkLabel ">
        写実主義
      </a><!-- .newsItem__label -->
    </div><!-- .newsItem__areaLabel -->
    <div class="newsItem__title">
      <a class="newsItem__linkTitle" href="">
        二葉亭四迷先生、「浮雲」を発表
      </a>
    </div><!-- .newsList_title -->
  </li><!-- newsList__newsItem -->
</ul><!-- .areaNews__newsList -->

SCSSファイル

/*セクション ニュース
/* ============================================ */
.newsList {
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.newsItem {
  border-bottom: 1px solid #707070;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  &:last-child {
    border-bottom: none;
  }

  &__date {
    flex: 0 0 95px;
    margin-top: 5px;
    margin-right: 17px;
    white-space: nowrap;
  }

  &__label {
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 4px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.08em;

  }

  &__title {
    align-self: center;
    width: 100%;
    padding-bottom: 10px;
    line-height: calc(20 / 16);
    letter-spacing: 0px;
  }

}

.label--bright3 {
  background-color: variable.$bright3_color;
}

.label--bright1 {
  background-color: variable.$bright1_color;
}