title: How do I get my text to line up with my image
body: <p>So in the content section of my website, I have a section with daily highlighted projects. Each one of them has a thumbnail with a small preview, a head, and a short description. The link to the page is both the thumbnail and the head, while the description is not clickable. </p>
  
  <p>The problem is my text shows up at the bottom right of the thumbnail, while it should just vertically line up with it. How do I make it move up so it goes under the head and to the right of the thumbnail?</p>
  
  <p><img src="https://i.stack.imgur.com/nOK2l.png" alt="The problem"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#highlights {
   width: 50%;
   float: left;
  }
  
  #highlights p {
   margin-left: 90px;
   margin-right: 30px;
  }
  
  #highlights img {
   vertical-align: top;
   border: 1px #00366C solid;
   margin-left: 5px;
  }
  
  #highlights h1 {
   display: inline;
   color: #00366C;
   font-weight: bold;
   font-size: 10px;
   background: none;
  }
  
  #highlights a {
   color: #00366C;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="http://gamingw.net/games/632"&gt;
      &lt;img height="65" src="images/game-632.jpg" width="80"&gt;
      &lt;h1&gt;Coastercraft Gold&lt;/h1&gt;
  &lt;/a&gt;
  &lt;p&gt;
      Enter the World of CoasterCraft. Builds rides, hire staff and do all sorts 
      of other Theme-park managemently-things in this fun and refreshing game.
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>