title: How to position two elements side by side?
body: <p>I am quite new to the world of CSS, and I've been trying to figure out how to position the .main and .comment side by side in the example at the end, with one caveat. I don't want to squeeze both into the same #container, I would like the comment to sort of "pop" out of the bounding box, and be aligned with the .main but outside of #container. The reason I want to do this is that the comment would initially be hidden and after the user clicks on something, the comment would sort of pop open. </p>
  
  <p>So more specifically, I would like .main to be in a box, and .comment in another box. .comment should be to the left of .main, and the tops of each .comment should line up with their respective .main. Preferably .comment should be visually outside of #container. </p>
  
  <p>If anyone can give me a pointer of what to do it would be much appreciated! The HTML is not set in stone, so if there is a more convenient representation, please do advise!</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              #container{
                  margin-left:auto;
                  margin-right:auto;
                  width:700px;
                  background-color:#eee9e9;
                  padding:5px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;div&gt;
                  &lt;p class="main"&gt;Some content Some contentSome contentSome contentSome contentSome contentSSSSome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content&lt;/p&gt;
  
                  &lt;p class="comment"&gt;Comments: some comments&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;p class="main"&gt;Some content Some contentSome contentSome contentSome contentSome contentSSSSome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content&lt;/p&gt;
                  &lt;p class="comment"&gt;Comments: some comments&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>