title: Getting hr line to go in between two other divs
body: <p>I am trying to get a <code>hr</code> tag to go in between two <code>div</code>s.</p>
  
  <p>I have placed the <code>hr</code> tag under the first <code>div</code> and above the second. I set both <code>div</code>s and the <code>hr</code> tag to <code>display</code> as <code>inline</code> in hopes of this being a sequence and displaying one after the other. My problem is the <code>hr</code> tag starts at the very top and stops where the other <code>div</code>s are.</p>
  
  <p>I have attached a fiddle to show what I am getting:</p>
  
  <p><a href="https://jsfiddle.net/31ytnun2/" rel="nofollow">https://jsfiddle.net/31ytnun2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.contactpagelower {
    margin-top: 40px;
  }
  .spancenter {
    text-align: center;
  }
  .contactpagecommunityContainer {
    float: left;
    width: 50%;
    margin-top: 30px;
    display: inline;
  }
  .contactpagecommunity {
    float: right;
    margin-right: 37%;
    background-color: #12BDB8;
    color: #FFFFFF;
    font-size: 16px;
    padding: 15px;
  }
  .contactpagecommunity a:link {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
  }
  .contactpagecommunity a:visited {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
  }
  .contactpagesellwithusContainer {
    float: right;
    width: 50%;
    margin-top: 30px;
    display: inline;
  }
  .contactpagesellwithus {
    float: left;
    margin-left: 35%;
    background-color: #12BDB8;
    color: #FFFFFF;
    font-size: 16px;
    padding: 15px;
  }
  .contactpagesellwithus a:link {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
  }
  .contactpagesellwithus a:visited {
    background-color: #12BDB8;
    color: #FFFFFF;
    outline: none;
  }
  .hrafter {
    display: inline;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contactpagelower"&gt;
    &lt;div class="spancenter"&gt;&lt;span class="teallarge"&gt;Extras gfgfggsfgfgsfd&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div class="contactpagecommunityContainer"&gt;
      &lt;p class="subscribebodytext"&gt;We want to hear from you, let us know what we can do to make your experience better!&lt;/p&gt;
      &lt;button onClick="#" class="contactpagecommunity"&gt;&lt;a href="community.php"&gt;Visit our community&lt;/a&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;hr class="hrafter" width="1" size="500"&gt;
    &lt;div class="contactpagesellwithusContainer"&gt;
      &lt;p class="subscribebodytext"&gt;Have you ever wanted to sell a product? We may be able to help.&lt;/p&gt;
      &lt;button onClick="#" class="contactpagesellwithus"&gt;&lt;a href="sellwithus.php"&gt;Sell with us&lt;/a&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried separating my two <code>div</code>s from each other by changing the <code>width</code>s hoping to get a gap in the middle. Like this:</p>
  
  <pre><code>.contactpagecommunityContainer {
      float: left;
      width: 49%;
      margin-top: 30px;
      display: inline;
  }
  .contactpagesellwithusContainer {
      float: right;
      width: 49%;
      margin-top: 30px;
      display: inline;
  }
  </code></pre>
  
  <p>I also tried setting the <code>hr</code> to be <code>inline-block</code>, but that just pushed the second <code>div</code> (<code>.contactpagesellwithusContainer</code>) below where the <code>hr</code> tag stops.</p>
  
  <p>Anyone know what I am doing wrong?</p>