How to fix positioning horizontally? - html

Question

I want to show a trailer and informational text next to it in my slick slider. However, they are positioned on top of each other whatever I try.
I have tried flexbox, and position them in rows. I also tried inline display, and float right and left for each div.
/* Styling the Trailer Slick Slider */
.single-item-rtl {
max-width: 1100px;
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
float: left;
}
/* Styling the Trailer Content */
#captain-marvel,
#endgame {
display: inline-flex;
flex-direction: row;
max-width: 1000px;
}
<article id="secondThirdArticle">
<div class="middleh3">Trailers & New Releases</div>
</br>
<div class="inner-grid">
<div dir="rtl" class="single-item-rtl">
<div id="captain-marvel">
<div>
<h4> Captain Marvel </h4>
<p>The MCU’s most powerful hero is set to land on the big screen. Brie Larson stars as Carol Danvers, aka Captain Marvel, alongside Samuel L. Jackson as Nick Fury, and Jude Law as Walter Lawson. In the midst of an inter-galactic war that threatens
to destroy the Earth, Carol Danvers must rise to a seemingly impossible challenge. Following the post-credit teaser of Avengers: Infinity War Part One, Captain Marvel is one of the most eagerly anticipated films of the year.</p>
</div>
<div>
<iframe width="504" height="284" src="https://www.youtube.com/embed/Z1BCujX3pw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</br>
</div>
<div id="endgame">
<div>
<h4> Avengers: Endgame </h4>
<p>The grave course of events set in motion by Thanos that wiped out half the universe and fractured the Avengers ranks compels the remaining Avengers to take one final stand in Marvel Studios' grand conclusion to twenty-two films, Avengers: Endgame.</p>
</div>
<div>
<iframe width="504" height="284" src="https://www.youtube.com/embed/TcMBFSGVi1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</br>
</div>
</div>
</div>
</br>
See All Trailers
</article>
`
I want some centred text with a header on the side of the trailer. They end up on top of each other. See website: http://www.student.city.ac.uk/~aczc972/

Answer 1

On the parent, use
display: flex;
align-items: center;
and it will line them up left-right. Just make sure the other components are direct children of the parent you put these styles on!

Answer 2

Use the grid exhibition layout. Basically you set a two columns: the text column and the trailer column and make sure that both occupy the role parent div. By doing so, you will properly separate both contents.
You may also search more properties of it such as spacing and better ways for organize your template. But basically, you could separate divs as follows:
html:
<div id="captain-marvel">
<div id="captain-marvel-title><h4> Captain Marvel </h4>
<p>The MCU’s most powerful hero is set to land on the big screen. Brie Larson stars as Carol Danvers, aka Captain Marvel, alongside Samuel L. Jackson as Nick Fury, and Jude Law as Walter Lawson. In the midst of an inter-galactic war that threatens to destroy the Earth, Carol Danvers must rise to a seemingly impossible challenge. Following the post-credit teaser of Avengers: Infinity War Part One, Captain Marvel is one of the most eagerly anticipated films of the year.</p>
</div>
<div id="captain-marvel-trailer">
<iframe width="504" height="284" src="https://www.youtube.com/embed/Z1BCujX3pw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
css:
#captain-marvel{
display:grid;
grid-template-columns: 1fr 1fr;
}
#captain-marvel-title{
grid-column:1;
background: red;
}
#captain-marvel-trailer{
grid-column:2;
background: blue;
}
I colored the div so you can see the delimitation between both.
For more information, please check this link
Hope it helps!

Answer 3

/* Styling the Trailer Content */
#captain-marvel, #endgame {
display: inline-flex;
flex-direction: row;
max-width: 1000px;
width: 100%;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}