html two sections below each other and aside - html

Question

When I add two section in my page the sidebar vertically equals the
second section, I need my first section and aside to be vertically equal.
How do I accomplish this? I tried float: left on Section 1 and display: inline on the parent section, but those seemed to cause aside to "break out".
when I add two section in my page the sidebar vertically equals the
second section, I need my first section and aside to be vertically equal.
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
* {
margin: 0;
padding: 0;
}
a {
color: #444;
}
body,
html {
width: 100%;
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0
}
body {
background: #f7f7f7;
min-height: 100%;
height: auto;
position: relative;
font-family: 'Roboto', sans-serif;
line-height: normal;
font-weight: normal;
font-size: 1em;
}
.site-header {
position: relative;
z-index: 99;
float: left;
width: 100%;
margin-bottom: 20px;
padding: 0;
background: #FFF;
}
#page,
.container {
width: 1124px;
min-width: 240px;
position: relative;
margin-right: auto;
margin-left: auto;
}
.header-inner {
width: 100%;
height: 100%;
display: table;
padding: 1% 0;
}
.secondary-navigation {
background: #17aa1c;
}
a:link,
a:visited,
a:active {
text-decoration: none;
}
a:active,
a:hover {
outline: 0;
}
.main-navigation ul li {
display: inline-block;
padding-top: 19px;
padding-bottom: 19px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
}
.main-navigation ul li a {
color: #fff;
}
.main-navigation ul li a:hover {
color: #ff9;
}
.secondary-navigation {
width: 100%!important;
}
.content-area {
width: 55%;
float: left;
margin-left: 100px;
margin-right: 1%;
margin-bottom: 20px;
background: #FFF;
padding: 0 10px;
-webkit-box-shadow: 0 1px 1px #c2c4c4;
-moz-box-shadow: 0 1px 1px #c2c4c4;
box-shadow: 0 1px 1px #c2c4c4;
text-shadow: 0 1px 1px #FFF;
clear: both;
}
.aside {
float: left;
width: 20%;
margin-bottom: 20px;
background: #FFF;
padding: 0 10px;
text-shadow: 0 1px 1px #FFF;
}
.inner {
padding: 10px;
}
.title {
font-weight: 500;
color: #444;
text-transform: uppercase;
margin: 0;
}
.post-info {
display: inline-table;
color: #919191;
float: left;
clear: both;
width: 100%;
}
.post-info>span {
display: inline-block;
font-size: 0.9em;
padding: 10px;
color: #919191;
text-transform: uppercase;
}
<section class="content-area">
<article>
<div class="inner">
<h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
<div class="post-info">
<span>Posted</span>
<span>Category</span>
<span>Date</span>
</div>
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<div class="readmore">Readmore</div>
</div>
</article>
</section>
<section id="primary" class="content-area">
<div class="inner">
<h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
<div class="post-info">
<span>Posted</span>
<span>Category</span>
<span>Date</span>
</div>
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<div class="readmore">Readmore</div>
</div>
</section>
<aside class="aside ">
<div class="inner">
<h3>Popular Posts</h3>
<ul>
<li>tempor incididunt ut labore et doloreincididunt ut labore et</li>
<li>tempor incididunt ut labore et dolore</li>
<li>tempor incididuntincididunt ut labore et ut labore et dolore</li>
</ul>
</div>
</aside>

Answer 1

Just wrap elements into flex-container and remove float: left. Demo:
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
* {
margin: 0;
padding: 0;
}
a {
color: #444;
}
body,
html {
width: 100%;
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0
}
body {
background: #f7f7f7;
min-height: 100%;
height: auto;
position: relative;
font-family: 'Roboto', sans-serif;
line-height: normal;
font-weight: normal;
font-size: 1em;
}
.site-header {
position: relative;
z-index: 99;
float: left;
width: 100%;
margin-bottom: 20px;
padding: 0;
background: #FFF;
}
#page,
.container {
width: 1124px;
min-width: 240px;
position: relative;
margin-right: auto;
margin-left: auto;
}
.header-inner {
width: 100%;
height: 100%;
display: table;
padding: 1% 0;
}
.secondary-navigation {
background: #17aa1c;
}
a:link,
a:visited,
a:active {
text-decoration: none;
}
a:active,
a:hover {
outline: 0;
}
.main-navigation ul li {
display: inline-block;
padding-top: 19px;
padding-bottom: 19px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
}
.main-navigation ul li a {
color: #fff;
}
.main-navigation ul li a:hover {
color: #ff9;
}
.secondary-navigation {
width: 100%!important;
}
.content-area {
width: 55%;
margin-left: 100px;
margin-right: 1%;
margin-bottom: 20px;
background: #FFF;
padding: 0 10px;
-webkit-box-shadow: 0 1px 1px #c2c4c4;
-moz-box-shadow: 0 1px 1px #c2c4c4;
box-shadow: 0 1px 1px #c2c4c4;
text-shadow: 0 1px 1px #FFF;
clear: both;
}
.aside {
width: 20%;
margin-bottom: 20px;
background: #FFF;
padding: 0 10px;
text-shadow: 0 1px 1px #FFF;
}
.inner {
padding: 10px;
}
.title {
font-weight: 500;
color: #444;
text-transform: uppercase;
margin: 0;
}
.post-info {
display: inline-table;
color: #919191;
float: left;
clear: both;
width: 100%;
}
.post-info>span {
display: inline-block;
font-size: 0.9em;
padding: 10px;
color: #919191;
text-transform: uppercase;
}
.flex {
display: flex;
}
<div class="flex">
<section class="content-area">
<article>
<div class="inner">
<h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
<div class="post-info">
<span>Posted</span>
<span>Category</span>
<span>Date</span>
</div>
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<div class="readmore">Readmore</div>
</div>
</article>
</section>
<aside class="aside ">
<div class="inner">
<h3>Popular Posts</h3>
<ul>
<li>tempor incididunt ut labore et doloreincididunt ut labore et</li>
<li>tempor incididunt ut labore et dolore</li>
<li>tempor incididuntincididunt ut labore et ut labore et dolore</li>
</ul>
</div>
</aside>
</div>
<section id="primary" class="content-area">
<div class="inner">
<h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
<div class="post-info">
<span>Posted</span>
<span>Category</span>
<span>Date</span>
</div>
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<div class="readmore">Readmore</div>
</div>
</section>