Flexbox main content in columns and sidebar - html

Question

I'm looking to create a website that has multiple divs as the main content, stacked on top of each other, and a sidebar on the right to show pictures, similar to the layout of reddit.
Using CSS flexbox- how do I make my main content divs line up?
Apologies for the messy code, I'm new to all this (also I'm sure there's a way to make all the elements have the same background color.. how would I do that?)
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.container div {
border: 3px #c63a32 solid;
color: azure;
padding: 10px;
margin: 10px;
border-radius: 15px;
}
.info {
order: 1;
width: 50%;
background-color: #0f3047
}
.info p {
font-size: 35;
background-color: #0f3047
}
.info span.ips {
font-size: 35;
color: yellow;
background-color: #0f3047
}
.info span.about {
font-size: 35;
color: rgb(192, 192, 238);
background-color: #c63a32;
}
span.or {
color: azure;
background-color: #0f3047
}
.gallery {
width: 15%;
order: 3;
background-color: #0f3047;
}
.gallery span.text {
font-size: 35;
color: rgb(192, 192, 238);
background-color: #c63a32;
}
.gallery p {
background-color: #0f3047;
}
.contact {
order: 3;
width: 50%;
background-color: #0f3047;
}
.contact span.CONTACT {
font-size: 35;
color: rgb(192, 192, 238);
background-color: #c63a32;
}
<div class="container">
<div class="info">
<p><span class="about">ABOUT US</span>xxx<br> xxx <br>
<br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
</p>
</div>
<div class="gallery">
<p><span class="text">GALLERY</span></p>
<!-- <img src="favicon.png"> -->
</div>
<div class="contact"> <span class="CONTACT">CONTACT</span> </div>
</div>

Answer 1

Maybe you need to try make a container for left or right content.
And then insert class for each of them and give rules for css, in this case I add column-left and column-right.
This is the html
<div class="container">
<div class="column-left">
<div class="info">
<p><span class="about">ABOUT US</span>xxx<br> xxx <br>
<br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
</p>
</div>
<div class="contact"> <span class="CONTACT">CONTACT</span> </div>
</div>
<div class="gallery column-right">
<p><span class="text">GALLERY</span></p>
<!-- <img src="favicon.png"> -->
</div>
</div>
And this is the style for the each column.
.column-left {
float: left;
width: 70%;
padding: 10px;
height: 300px;
}
.column-right {
float: left;
width: 30%;
padding: 10px;
height: 300px;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.container div {
border: 3px #c63a32 solid;
color: azure;
padding: 10px;
margin: 10px;
border-radius: 15px;
}
.info {
order: 1;
width: 50%;
background-color: #0f3047
}
.info p {
font-size: 35;
background-color: #0f3047
}
.info span.ips {
font-size: 35;
color: yellow;
background-color: #0f3047
}
.info span.about {
font-size: 35;
color: rgb(192, 192, 238);
background-color: #c63a32;
}
span.or {
color: azure;
background-color: #0f3047
}
.gallery {
width: 15%;
order: 3;
background-color: #0f3047;
}
.gallery span.text {
font-size: 35;
color: rgb(192, 192, 238);
background-color: #c63a32;
}
.gallery p {
background-color: #0f3047;
}
.contact {
order: 3;
width: 50%;
background-color: #0f3047;
}
.contact span.CONTACT {
font-size: 35;
color: rgb(192, 192, 238);
background-color: #c63a32;
}
.column-left {
float: left;
width: 60%;
padding: 10px;
height: 300px;
}
.column-right {
float:left;
width: 20%;
padding: 10px;
height: 300px;
}
<div class="container">
<div class='column-left'>
<div class="info">
<p><span class="about">ABOUT US</span>xxx<br> xxx <br>
<br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
</p>
</div>
<div class="contact"> <span class="CONTACT">CONTACT</span> </div>
</div>
<div class="gallery column-right">
<p><span class="text">GALLERY</span></p>
<!-- <img src="favicon.png"> -->
</div>
</div>