How can i make a div stay next to a specifc element in all Screens types with HTML, CSS and Js?

Question

I'm having struggles with what I'm trying to acomplish. Basicly I have 2 colums in my HTML and on my left colum I have text and want to have div's on the right colum with videos stay near certain parts of the text. Diferent aproaches I have tried are table cells, who I couldn' make work how I wanted because it would deformat the text creating big spaces between paragraphs to fit in the size of the video on the right. I have also tried dummy divs to fill the vertical space but this won't work for all screens since the div's sizes will be diferent. I've tried searching for some anchors that could be attached to the text somehow where I could create a div next to it without influencing the text itself but I'm kinda lost. I hope this question is according to the rules. Thanks in advance.

image in paint to help

Answer 1

Please check this link and let me know whether you want this type of layout

 .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>