Борьба с использованием flexbox для выравнивания по обеим осям?

Question

Попытка выяснить, как использовать flexbox для выполнения sh макета, который в основном состоит из двух столбцов, но для каждого раздела нужен маркер с левой стороны, подчеркивающий, что это такое (вроде как заметки Корнелла). Поэтому я бы подумал, что в этом примере мне нужно, чтобы обзор h2 находился в div с текстом обзора.

Проблема, с которой я сталкиваюсь, заключается в том, что когда у меня изображение справа, я хочу чтобы он оставался на одном уровне с текстом, но, поскольку я центрируюсь во flexbox, все просто выравнивается по центру, а не по краю в середине слева, где я хочу, чтобы текст / изображения были выровнены по заголовкам. Например, в этом коде я бы хотел, чтобы левая сторона изображения собаки, как черные текстовые тела, так и лампочка, были выровнены по вертикали, а также «обзор», «проблема» и «фотография» выровнены по вертикали.

В идеале все они должны располагаться друг на друге на меньшем экране для адаптивных целей.

Большое спасибо и, надеюсь, это имеет смысл.

кодовое перо: https://codepen.io/skhoffman426/pen/rNVgrpJ

<div class="segments" id="cctopsegment">
    <img class="responsive" src="https://www.thefamilypethospital.com/sites/default/files/styles/large/adaptive-image/public/golden-retriever-dog-breed-info.jpg?itok=5g5ejXaU"/></div>

  <div class="segments">
  <h2 class="left">OVERVIEW</h2>
  <p class="right"> Overview Text overview text overview text overview text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p></div>

  <div class="segments">
  <h2 class="left">PROBLEM</h2>
  <p class="right">Problem Text problem text problem text problem text text text text text text text text text text text text text text text text text text text text text.</p>
  </div>

  <div class="segments">
  <h2 class="left">PHOTO</h2>
  <img class="responsive" src="https://www.digitalmarketingcommunity.com/wp-content/uploads/2019/12/SmallBizGenius-logo.png"/>
  </div>

.responsive {
  width: auto;
  max-width: 100%;
}

#cctopsegment {
  margin-top: 120px;
}

.segments {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin: 50px;
}

.left {
    margin-right: 60px;
}

h2 {
    font-family: 'Oswald', sans-serif;
    color: #A79371;
    font-weight: lighter;
}

.right {
  max-width: 587px;
  margin-right: 60px;
}