title: Horizontal line - Login Form
body: <p>I am trying to add a horizontal line aligned to the word "or" in this login form, however i can not get it to work as it will just align underneath the word.
  <a href="https://i.stack.imgur.com/12byj.png" rel="nofollow noreferrer">https://i.stack.imgur.com/12byj.png</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>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
  }
  
  body,
  html {
    width: 100%;
    height: 100%;
    font-family: 'Lato', Arial, sans-serif;
  }
  
  #loginForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="new 1.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form id="loginForm"&gt;
      &lt;input type="text" class="login-username" placeholder="Username/E-mail" autofocus="true" required&gt;
      &lt;input type="password" class="login-password" placeholder="Password" required&gt;
      &lt;button type="submit" class="login-submit" name="submit"&gt;Login&lt;/button&gt;
      &lt;a id="forgotPass" href="#" class="login-forgot-pass"&gt;Forgot password?&lt;/a&gt;
      &lt;p&gt;or&lt;/p&gt;
      &lt;a id="Signup" href="signup.html"&gt;Register&lt;/a&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>