How to make my <aside> same height as main part?

right now I am trying to duplicate a webpage image, but for some reason on my part of the page the part where it says "recommended links" doesn't line up with the "HOME" header. Is there a way to do this? and how would i correct my code/css to implement this? Thank you! (right now the aside part appears further down the page than intended).

my code:

 <!-- Your code goes here -->
<section>  
<h1>HOME</h1>

<article>
<h2>HTML5 & CSS Normalize</h2>
<p> </p>

</article>

<article>
<h2>Honesty/Copyright</h2>
<p> </p>

</article>
</section>
<aside>
<section>
<h4><u>Recommended Links</u></h4>

<p>HTML5 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</P>
<p>CSS 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</P>
<p>JavaScript 

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
 </P>

<hr>

<h4><u>Social Media Links</u></h4>

<div class="social">
       <!-- images on row 1 - top 3px left 4px   - increment left by 27px   for the next one -->
       <!-- images on row 2 - top 30px left 4px  - increment left by 27px for the next one -->
       <!-- images on row 3 - top 57px left 4px  - increment left by 27px for the next one -->
       <!-- images on the next row - increment top by 27px for the next row -->
 <a href="http://facebook.com" title="Face Book"  style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> 

</div>
</section>
</aside>

<!-- Your code ends here -->
<!-- Defining Footer -->
<div id="footer">

  <script>
      var dt=new Date(document.lastModified);   // Get document last modified date
      document.write('This page was last updated on '+dt.toLocaleString()) 
   </script>

</div>
</body>
</html>

CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/*Add an "active" class to the current link to let the user know which page      he/she is on*/
.active {
background-color: #4CAF50;
}

 /* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

aside {
  float: right;
  width: 30%;

}

.social{
position: relative; 
background: url('social-media.png') no-repeat; 
width: 250px; 
height: 140px;
}

#footer {
  clear: both;
  background: #000;
  color: #fff;
  bottom: 0;
}