Как сделать так, чтобы div оставался рядом с конкретным элементом во всех типах экранов с HTML, CSS и Js?

Question

У меня проблемы с тем, что я пытаюсь достичь.В основном у меня есть 2 столбца в моем HTML, и в левом столбце у меня есть текст, и я хочу, чтобы div-столбцы находились в правом столбце, поскольку видео остаются рядом с определенными частями текста.Разные подходы, которые я пробовал, - это ячейки таблицы, которые я не мог сделать так, как хотел, потому что это деформировало бы текст, создавая большие промежутки между абзацами, чтобы соответствовать размеру видео справа.Я также попробовал фиктивные div, чтобы заполнить вертикальное пространство, но это не сработает для всех экранов, так как размеры div будут разными.Я пытался найти некоторые якоря, которые могли бы каким-либо образом прикрепляться к тексту, где я мог бы создать рядом с ним элемент div, не влияя на сам текст, но я немного растерялся.Я надеюсь, что этот вопрос в соответствии с правилами.Заранее спасибо.

изображение в краске, чтобы помочь

Answer 1

Пожалуйста, проверьте эту ссылку и дайте мне знать, хотите ли вы этот тип макета

.row {
  align-items: flex-end;
  display: flex;
}
.bg-red {
  background: red;
}
.col-6 {
  width: 50%;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
       <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
    </div>
    <div class="col-6">
      <video width="100%" height="300" controls>
          <source   src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
      </video>
    </div>
  </div>
  <div class="row bg-red">
    <div class="col-6">
     
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremq natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
    </div>
    <div class="col-6">
      <video width="100%" height="300" controls>
          <source   src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</div>