title: HTML / CSS: Section + Aside Issue
body: <p>I've an issue with my aside bar and the <em>timestamp</em> in my section.</p>
  
  <pre><code>        &lt;section&gt;
              &lt;div class="thumbnail-title"&gt;
                  Sample
              &lt;/div&gt;
  
              &lt;div class="thumbnail-image"&gt;&lt;/div&gt;
              &lt;div class="thumbnail-text"&gt;
                  &lt;div class="thumbnail-timestamp"&gt;
                      02-11-2016 18:51 P.M.
                  &lt;/div&gt;
                  Hello this is random text that I will test today to see if my sizing is correct.
                  ello this is random text that I will test today to see if my sizing is correct.
               &lt;/div&gt;
          &lt;/section&gt; 
  
          &lt;aside&gt;
              Random Aside Text.
          &lt;/aside&gt;
  </code></pre>
  
  <p>If I add more sections, the aside bar sticks to the last section, where as I want it to stick from top downwards.</p>
  
  <p>Also my timestamp is okay if one section exists but if more sections are added, timestamp get's pushed below the text.</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>section,
  aside
  {
      margin: 20px 20px 24px 0;
  }
  
  section
  {
      float: left;
      width: 55%;
      margin-left: 20px;
      border: 3px solid black;
      padding-bottom: 20px;
      border-radius: 10px;
  }
  
  .thumbnail-title
  {
      border: 3px solid black;
      border-top: none;
      border-left: none;
      border-right: none;
      padding: 15px;
      text-align: center;
      font-size: 24px;
      margin-bottom: 20px;
  }
  
  .thumbnail-image
  {
      float: left;
      height: 200px;
      width: 300px;
      border: 3px solid black;
      margin-left: 20px;
      margin-right: 20px;
      border-radius: 10px;
  }
  
  .thumbnail-text
  {
      font-size: 18px;
      text-align: left;
      padding: 20px;
      padding-left: 20px;
      margin-left: 20px;
      margin-right: 20px;
      border-radius: 10px;
  }
  
  .thumbnail-timestamp
  {
      border: 1px solid black;
      text-align: right;
      float: right;
      width: 360px;
      height: 10px;
      padding: 2px;
      font-size: 10px;
      margin-bottom: 10px;
      border-top: none;
      border-left: none;
      border-right: none;
  }
  
  aside 
  {
      float: right;
      width: 38%;
      padding: 10px;
      border: 3px solid black;
      border-radius: 10px;
  }
  </code></pre>
  
  <p>I want my page to look like this:
  <a href="https://i.stack.imgur.com/uX3Mc.png" rel="nofollow noreferrer">Idea</a></p>