title: Aligning two CSS elements next to eachother
body: <p>I'm trying to align two div's together through using inline-block but I'm having some weird issues with this, I have tried using float and had the same problem.</p>
  
  <p>Here's an example of what's going on:
  <a href="https://i.stack.imgur.com/Ft0Vr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ft0Vr.png" alt="enter image description here"></a></p>
  
  <p>They should be next to each-other but they are misaligned.</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#content .articlehs h3 {
    margin-top: 0px;
    font-family: 'New Rocker', cursive;
    background: url("../img/article_head.png") repeat-x;
    border: 2px solid background: url("../img/asbg.png") repeat-x;
    padding: 10px 20px;
  }
  
  #content .articlehs p {
    background: url("../img/asbg.png") repeat-x;
    padding: 10px 20px 20px;
  }
  
  #content .articlehs {
    display: inline-block;
    background: url("../img/asbg.png") repeat-x;
    width: 50%;
    margin-left: 10%;
    margin-top: 10px;
  }
  
  #content .articleSidebar h3 {
    margin-top: 0px;
    font-family: 'New Rocker', cursive;
    background: url("../img/article_head.png") repeat-x;
    border: 2px solid background: url("../img/asbg.png") repeat-x;
    padding: 10px 20px;
  }
  
  #content .articleSidebar p {
    background: url("../img/asbg.png") repeat-x;
    padding: 10px 20px 20px;
  }
  
  #content .articleSidebar {
    display: inline-block;
    background: url("../img/asbg.png") repeat-x;
    width: 20%;
    margin-left: 10%;
    margin-top: 40px;
  }
  </code></pre>
  
  <p>I uploaded some sample code to jsfiddle, <a href="https://jsfiddle.net/sj851u5z/" rel="nofollow noreferrer">https://jsfiddle.net/sj851u5z/</a>
  Wondering if anyone can help me out with this as I've tried many different things with no luck :( Thanks!</p>