How to Set Main-Container Div's Height Responsive in relevance to nested div elements ?

How to set height of main-container div with response to nested div elements?

I have made two div elements placed next to each other with-in a main-container div.
Height of both div is set to auto. How can i set height of main-container div so it gets adjust as per the height of both div elements inside it, and footer element after main -container div gets placed at bottom of page. In bigger screens its not happening...See Codepen 0.5 view
Please Help

https://codepen.io/gpriya155/pen/yLNOQpL

Comments

[Ryan Feigenbaum]

Hi. The use of floats will make that complicated. One solution is to add display: flex; to the main container. You'll have to move the Timeline H1 tag into the child div, so it looks right