This might not be possible ? I am a rookie. I am trying to have a map in one column and an info box in the second column. I’d like the left column to be 70% and the right 30%. I would like the content to all be contained at the same height.
How would I create this in CSS and HTML?
I will attach the code pen link shortly
You can use css grid like @sgedye mentioned.
But flexbox would also do the trick. I’ve build a website like that one with flexbox.
With flexbox the two columns will appear next to each other if there’s enough room, and below each other if the screen is too small for two columns. You need to tell them to row-wrap for that.
It can be a bit tricky to get the width of those columns right. 70 and 30 percent might not work for the layout. You probably need a margin around it and that influences the width of the two boxes in the flexbox.
Here’s some info on flexbox and how to use the parent, children and siblings to get the desired layout.