[SOLVED] Problem with CSS flex in HTML Main Conent and Sidebar

Question

I want to display 2 items in a row in main content and the main and sidebar divs to stay side by side, but the sidebar goes bottom of main div.

And footer at the bottom will have full width.

What is the problem here.

https://code.sololearn.com/W70tsXgdxgzt/?ref=app

Answer 1

.main > p {
width: 48%;
background:#555;
margin:1px;
display:inline-block ;
}

Answer 2

Apply flex to the body.

body {
margin: 0;
display: flex;
flex-wrap: wrap;
}

Answer 3

Avinesh that code created lot of UI problems in my page.
PLEASE check my updated code, I just want to make the .main to display 2 items in one line.