title: Centred vertical line between two divs
body: <p>I am trying to achieve the following layout (except with a straight line obviously)</p>
  
  <p><a href="https://i.stack.imgur.com/xVZil.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xVZil.png" alt="enter image description here"></a></p>
  
  <p>But I'm unsure how to, I tried adding a right border to the left element, but it isn't centred. How do I go about it?</p>
  
  <p>This is what I have at the moment</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> div.contentswrapper {
    text-align: center;
    margin: 0 auto;
    max-height: 720px;
   }
  
  div.pageleft, div.pageright {
    display: inline-block;
   vertical-align: top;
   overflow: auto;
   }
  
   div.pageleft, div.pageright {
    width: 40%;
    margin-left: 3%;
    margin-right: 3%;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="contentswrapper"&gt;
   
    &lt;div class="pageleft"&gt;
     &lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
     &lt;p&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class="pageright"&gt;
     &lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
     &lt;p&gt;
     &lt;/p&gt;
     &lt;p&gt;
     &lt;/p&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>