title: Align two elements horizontally
body: <p>I'm having problems placing two elements on the same line inside a container. I think I'd better to show you what I mean: <a href="http://fillobottosw.altervista.org/" rel="nofollow noreferrer">http://fillobottosw.altervista.org/</a></p>
  
  <p>After the expansion is performed, a sort of description is shown on the right side, but out the box, instead of being displayed inside the gray border.
  This is what I wrote down so far:</p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;div class="tile"&gt;
                    &lt;div id="main" width="509" style="float: left;"&gt;
                      &lt;img src="images/rbf.png" width="509" height="188"&gt;                 
                    &lt;/div&gt;
  
                    &lt;div id="second" width="509" style="float: left;"&gt;
                       &lt;p class="description"&gt;...text...&lt;/p&gt;         
                    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS CODE</strong></p>
  
  <pre><code>p.description {
      display: none;
      color: #999;
      float:right; 
      margin-left: 520px;
  }
  
  .tile {
      border-style:solid;
      border-color: #999;
      border-width: 1px;
  
      height: 188px;
      width: 509px;
  
      margin-right: auto;
      margin-left: auto;
  
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong> (for expansion)</p>
  
  <pre><code>$('.tile').hover(   
    function() {  
          $(this).filter(':not(:animated)').animate({ width: '1100px'}, 600, 'swing',
               function() { $(this).find('.description').fadeIn(700);
           });
    },
    function() {  
       $(this).find('.description').hide();
       $(this).animate({width: '509px'}, 200);  
  
    }
  );
  </code></pre>
  
  <p>Can you please tell me the error I keep doing?
  Thanks in advance</p>