title: Create a border around div with top-border going through header and bottom-border going through button
body: <p>I want to create what is shown in this mockup: <a href="https://i.stack.imgur.com/sYEPu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sYEPu.png" alt="enter image description here"></a></p>
  
  <p>Here is what I currently have: <a href="https://codepen.io/raney24/pen/VOmjBY" rel="nofollow noreferrer">https://codepen.io/raney24/pen/VOmjBY</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header-border {
    width: 100%;
    margin-bottom: 10px;
    border-left: red solid 1px;
    border-right: red solid 1px;
    border-bottom: red solid 1px;
    .heading, .heading-subtitle {
      text-align: center;
    }
    .heading &gt; span, .heading-subtitle &gt; span {
      background-color: white;
      box-shadow: white 11px 0px 0px,
                  white -13px 0px 0px;
      &amp;:after {
        content: '';
        border-top: 1px solid red;
        height: 1px;
        width: 100%;
        display: block;
        position: relative;
        top: -20px;
        z-index: -1;
      }
    }
    .heading-subtitle &gt; span {
      &amp;:after {
        top: -13px;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="header-border"&gt;
        &lt;h2 class="heading"&gt;&lt;span&gt;Learn More About What We Do&lt;/span&gt;&lt;/h2&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;div class="header-border"&gt;
            &lt;h4 class="heading-subtitle"&gt;&lt;span&gt;Coding School&lt;/span&gt;&lt;/h4&gt;
            &lt;p&gt;Awesome Inc U is our coding school. It is for both adults and children. We have taught over 1500 people to code with us.&lt;/p&gt;
             &lt;div class="text-center"&gt;
               &lt;a class="btn btn-sm btn-primary" href="#"&gt;Read More&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- row--&gt;
  &lt;/div&gt;&lt;!-- container --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm not sure how to move the borders down so that they don't go above my header borders. Maybe I'm going at it from the wrong approach, if so let me know what your thoughts are.</p>
  
  <p>I'm open to using JavaScript/JQuery, but would like to avoid it if possible.</p>