Is there a way to create this specific layout using CSS? It seems like a simple design, but I'm struggling with the coding. The red div will display an image advertisement and will always be 350px wide, positioned on the right side of the page. The green div will hold the website content and its width will adjust dynamically to fill the remaining space next to the red div. Both divs should maintain the same height.
https://i.sstatic.net/lQOYk.png
html, body {
width: 100%;
margin: 0 auto;
}
.green-div {
background-color: green;
display: inline-block;
margin: 0 auto;
height: 100%;
}
.red-div {
background-color: red;
display: inline-block;
width: 350px;
height: 100%;
}<div class="green-div">
<p>Green Div</p>
</div>
<div class="red-div">
<p>Red Div</p>
</div>