<div class="media_container">
  <div class="media_item">
    <div class="media_photo">
      <a href="#"><img src="https://iroha-wd.com/wp-content/uploads/2022/03/flex-pic1.png"></a>
    </div>
    <div class="media_text">
      <h3><a href="#">flexboxタイトル１</a></h3>
      <p>PCでは横並び、スマホでは縦並びになるレイアウトは、現場でもよく利用されます。この例でのCSSは余白や文字の大きさなど、最小限の装飾をしてます。</p>
      <div class="media_info">
        <span>CSS｜flexbox</span>
      </div>
    </div>
  </div>
        
  <div class="media_item">
    <div class="media_photo">
      <a href="#"><img src="https://iroha-wd.com/wp-content/uploads/2022/03/flex-pic2.png"></a>
    </div>
    <div class="media_text">
      <h3><a href="#">flexboxタイトル2</a></h3>
      <p>PCでは横並び、スマホでは縦並びになるレイアウトは、現場でもよく利用されます。この例でのCSSは余白や文字の大きさなど、最小限の装飾をしてます。</p>
      <div class="media_info">
        <span>CSS｜flexbox</span>
      </div>
    </div>
  </div>
  
  <div class="media_item">
    <div class="media_photo">
      <a href="#"><img src="https://iroha-wd.com/wp-content/uploads/2022/03/flex-pic3.png"></a>
    </div>
    <div class="media_text">
      <h3><a href="#">lexboxタイトル2</a></h3>
      <p>PCでは横並び、スマホでは縦並びになるレイアウトは、現場でもよく利用されます。この例でのCSSは余白や文字の大きさなど、最小限の装飾をしてます。</p>
      <div class="media_info">
        <span>CSS｜flexbox</span>
      </div>
    </div>
  </div>
</div>

.media_container{
  margin: 0 0 40px 0;
  border-top: 1px solid #ccc;
}
.media_container a {
  display: block;
  color: #555;
  text-decoration: none;
}
.media_container a:hover {
  opacity: .5;
}
.media_item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.media_photo {
  margin: 20px;
}
.media_text {
  padding: 20px;
}
.media_text h3 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}
.media_info {
  font-size: .75rem;
}
.media_info span{
  color: #368caa;
  font-weight: 900;
}
.media_text p {
  margin: 0 0 10px 0;
}
@media (max-width: 767.98px) {
  .media_item {
    display: flex;
    flex-direction: column;
  }
}