Issues with fill a screen with DIV-CodePudding

I need to make a screen with 3 divs. In div one i will show a video so it needs to be in 16:9 ratio. Then i have two divs left. At the right i need a div that will be fill the width left from the video div. But in needs to be a square div. And below the video div i want another div that use that space.

I was thinking of two columns, two rows and combined column at the right. But that is table wise. How can i do this with a div.

What i have in HTML now is:

 <div id="mainWrapper">
        <div id="streamDiv"><iframe width="90%" height="90%"  src="https://www.youtube.com/embed/SQzhybzvRaQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        <div id="chatDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis libero finibus mi finibus, in consectetur lorem finibus. Phasellus consequat at ipsum a efficitur. Nulla facilisi. Sed tempus mi vel mauris efficitur rhoncus. Maecenas tristique neque sit amet fringilla pharetra. Sed porta nec sem quis viverra. Curabitur at bibendum mauris, eget condimentum diam. Phasellus nunc nisi, mollis sed mauris a, maximus pharetra lacus. Vestibulum quis nibh ut lacus feugiat placerat at sed dui. Mauris eget vehicula urna. Fusce in dolor quis sapien rutrum porta sed sit amet elit. Aliquam feugiat nisl nec augue feugiat maximus.</div>
        <div id="pollDiv">poll</div>
</div>

and in CSS i have:

#mainWrapper {
    height: auto;
    margin-bottom: 30px;
}
#streamDiv {
    width: 1000px;
    background-color: aqua;
  height: 563px;
  display: block;
  float: left;
  position: relative;

}
#chatDiv {
    left: auto;
    width: 100% auto;
    height: 100% ;
    margin-left: 10px;
    margin-right: 10px;
    flex-grow: 1;
    margin-top: auto;
    background-color: #ff3333;
    height: 1000px auto;
    display: block;
}
#pollDiv {
    clear: both;
}

but that will give me this:

enter image description here but i want: enter image description here

CodePudding user response：

This here seems to get the desired result that you want. I changed the wrapper to be a grid system. You can read more about it here CSS: Grid Layout

#mainWrapper {
    height: auto;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: auto auto;
}
#streamDiv {
    width: 1000px;
    background-color: aqua;
    height: 563px;
    display: block;
}
#chatDiv {
    left: auto;
    width: 100% auto;
    height: 100% ;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: auto;
    background-color: #ff3333;
    height: 1000px auto;
    display: block;
}

#pollDiv {
    clear: both;
}

 <div id="mainWrapper">
        <div id="streamDiv"><iframe width="90%" height="90%"  src="https://www.youtube.com/embed/SQzhybzvRaQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        <div id="chatDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis libero finibus mi finibus, in consectetur lorem finibus. Phasellus consequat at ipsum a efficitur. Nulla facilisi. Sed tempus mi vel mauris efficitur rhoncus. Maecenas tristique neque sit amet fringilla pharetra. Sed porta nec sem quis viverra. Curabitur at bibendum mauris, eget condimentum diam. Phasellus nunc nisi, mollis sed mauris a, maximus pharetra lacus. Vestibulum quis nibh ut lacus feugiat placerat at sed dui. Mauris eget vehicula urna. Fusce in dolor quis sapien rutrum porta sed sit amet elit. Aliquam feugiat nisl nec augue feugiat maximus.</div>
        <div id="pollDiv">poll</div>
</div>