Making two flex items align in a row - html

Question

I have two flex box elements that are each supposed to take up 50% of the browser window.
Right now, from the way I've coded it, they only stack on top of each other.
How can I get these two to be inline with each other?
I've tried setting their containers to be inline-block while the children have 50% as their width.
Live reference: https://jsfiddle.net/mqefpdkt/
/*.desktop{
display: none;
}*/
.w50 {
width: calc(50% - .1rem);
}
.w50.border-left {
border-left: 1px solid #dddddd;
}
.blog-column {
min-width: 100%;
}
.blog-column .blog-item {
padding: 60px 40px;
transition: all 0.3s;
background: #fff;
}
.blog-column .blog-item:hover {
cursor: pointer;
}
.blog-column .blog-item:hover h2.highlight {
background: rgba(35, 220, 116, 0.7);
}
.blog-column .blog-item:hover h2.highlight:after {
height: 10%;
background: #23dc74;
width: 100%;
}
.blog-column .blog-item span.read-more {
font-size: 2rem;
}
.blog-column .blog-item span.read-more:before {
content: "";
display: block;
height: 2px;
width: 0;
background-color: transparent;
}
.blog-column .blog-item h2.highlight {
padding: 10px 10px 15px 10px;
display: inline-block;
margin: 0 0 20px 0;
line-height: normal;
font-weight: 700;
position: relative;
background: rgba(35, 220, 116, 0.5);
transition: all 0.3s;
font-style: italic;
}
.blog-column .blog-item h2.highlight:before {
display: block;
position: absolute;
top: 45%;
width: 100%;
height: 40%;
margin-left: -3px;
content: "";
}
.blog-column .blog-item h2.highlight:after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10%;
background: rgba(35, 220, 116, 0.3);
content: "";
transition: all 0.3s;
}
.blog-column .blog-item h2.highlight a {
height: 100%;
color: #141516;
}
.blog-row > .blog-column {
width: 100% !important;
}
.blog-row {
border-top: 1px solid #ddd;
}
.gutters {
padding: 0.1rem;
}
.gutters > .blog-column,
.gutters > .blog-row {
width: 100% !important;
min-width: 0;
}
.space-around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.center {
-webkit-align-items: start;
-ms-flex-align: start;
-ms-grid-row-align: start;
align-items: start;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.panel {
text-align: center;
}
.panel.secondary {
background-color: #fff;
}
#media only screen and (min-width: 768px) {
.blog-item:hover h2.highlight {
background: rgba(35, 220, 116, 0.7);
}
.blog-item:hover h2.highlight:after {
height: 10%;
background: rgba(35, 220, 116, 0.8);
width: 100% !important;
}
.blog-item span.read-more {
font-size: 2rem;
}
.blog-item span.read-more:before {
content: "";
display: block;
height: 2px;
width: 0;
background-color: transparent;
}
.blog-item h2.highlight {
padding: 10px;
display: inline-block;
margin: 0 0 25px 0;
line-height: normal;
font-weight: 700;
position: relative;
background: rgba(35, 220, 116, 0.5);
transition: all 0.3s;
font-style: italic;
}
.blog-item h2.highlight:before {
display: block;
position: absolute;
top: 45%;
width: 100%;
height: 40%;
margin-left: -3px;
content: "";
}
.blog-item h2.highlight:after {
position: absolute;
left: 0;
bottom: 0;
width: 0 !important;
height: 10%;
background: rgba(35, 220, 116, 0.3);
content: "";
transition: all 0.3s;
}
.blog-column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
height: auto;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.blog-column .blog-item span.read-more {
padding-bottom: 5px;
text-align: center;
}
.blog-column .blog-item .right-arrow {
transition: all 0.3s;
position: relative;
}
.blog-column .blog-item:hover .right-arrow {
left: 5px;
}
.blog-column .blog-item h2 {
padding: 0;
font-size: 2.5rem;
text-align: center;
}
.gutters {
padding: 2rem;
}
.gutters > .blog-column,
.gutters > .blog-row {
margin: 1rem;
border-bottom: 5px solid red;
}
}
<div class='panel white'>
<div class='blog-row space-around'>
<div class='blog-column w50'>
<div class='blog-item center'>
<h2 class='highlight'><a
href='#'
class='w50'>Article Title</a></h2>
<span class='read-more'>Latest from the blog <span class='right-arrow'>→</span></span>
</div>
</div>
<div class='blog-column w50 desktop'>
<div class='blog-item center'>
<h2 class='highlight'><a
href='#'>Article Title</a></h2>
<span class='read-more'>Latest from the blog <span class='right-arrow'>→</span></span>
</div>
</div>
</div>
</div>

Answer 1

You need to make the div with class space-around a flex container.
Instead of this:
.space-around {
justify-content: space-around;
}
Try this:
.space-around {
display: flex;
justify-content: space-around;
}
This will apply default flex settings, including horizontal alignment, to both children (w50).
Revised Fiddle
If you want both items to not overflow the screen, remove this rule:
.blog-column { min-width: 100%; }