title: Add vertical Line with Text in between, between 2 Forms
body: <p>I'm trying to style a Login &amp; Registration page and want to include a vertical line with the word in the middle, as shown below.
  I already tried creating a div between the 2 forms, but I'm struggling with the word in between the line.
  How can this be accomplished?</p>
  
  <p>What I tried:</p>
  
  <pre><code>&lt;div class="verticalline"&gt;
    &lt;form&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.verticalline{
  border right: 1px solid black;
  }
  </code></pre>
  
  <p>But then the line is "attached" to the left form, and I can't get it loose from it with margin or border. Also I'm not sure how to do the word in between.</p>
  
  <p><a href="https://i.stack.imgur.com/QsBoj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QsBoj.png" alt="enter image description here"></a></p>