Можно ли добавить слои (больше строк) текста, используя один гибкий элемент?

Question

Я создал элемент контейнера flexbox, в котором мой iframe находится справа.

Однако мне бы хотелось, чтобы два, может быть, даже три слоя текста равномерно располагались с разными тегами слева от него.разнесены по ширине: 1000 пикселей;поле: 0 авто;Div у меня есть.скорее всего, заголовок H3 и P.

в тот момент, когда они находятся рядом.Flexbox, очевидно, создал еще один элемент для P.

Есть ли способ опустить P ниже H3 и заставить его вести себя так, чтобы он был в центре этого элемента?Также мне нужно, чтобы P не выливался из элемента и не помещался в iframe (max-width?)

HTML:

    <main>
      <div class="vid-1">
        <h3 id="hide" class="chan-h3-shift">A comprehensive view on the Oculus Go</h3>
        <p id="hide" class="chan-p-shift">This review</p>
        <iframe class="lefttoright" src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </main>

CSS:

    #hide  {
      display: block;
    }

    .vid-1  {
      display: flex;
      width: 1000px;
      padding-bottom: 300px;
      margin: auto;
    }

    iframe  {
      width: 50%;
      height: 300px;
      position: absolute;
      display: block;
      transform: translate(500px, 0)
    }

    .chan-h3-shift  {
      font-size: 0.9em;
      padding: 0 0 0 60px;
    }


    .chan-p-shift  {
      padding: 0 800px 0 60px;
    }

    @keyframes lefttoright {
      0%  {
        transform: translateX(-100%);
        opacity: 0;
      }
      100%  {
        transform: translateX(0);
      }
    }

    .lefttoright  {
      animation-name: lefttoright;
      animation-duration: 3s;
    }

Answer 1

если вы хотите, чтобы ваш p ​​и ваш h3 находились друг над другом, лучше всего использовать другой div, чтобы обернуть их:

 <div class="vid-1">
  <div class="column"> 
    <h3 id="hide" class="chan-h3-shift">A comprehensive view on the Oculus Go</h3>
    <p id="hide" class="chan-p-shift">This review</p>
  </div>
  <iframe class="lefttoright" src="..."></iframe>
 </div>

С помощью этого css:

.column {
  display: flex;
  flex-direction: column;
}

Это делает трюк?