title: Styling <hr> tag and text in mailer css
body: <p>I want to setup a mailer styling like below (this is a mobile view which is most important).</p>
  <p><a href="https://i.stack.imgur.com/Vtazj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vtazj.png" alt="mail view" /></a></p>
  <p>I don't know how to achieve such a view. I was trying something below:</p>
  <pre><code>&lt;h1&gt;Hi there,&lt;/h1&gt;
  &lt;p&gt;Thank you for signing up!&lt;/p&gt;
  &lt;hr&gt;
  &lt;p&gt;You're almost there. Before starting with your journey, we want to make sure that your email address is correct. Please click here to complete your subscription.&lt;/p&gt;
  &lt;hr&gt;
  &lt;h2&gt;Your account&lt;/h2&gt;
  ...
  </code></pre>
  <p>with CSS:</p>
  <pre><code>  h1 {
      color: #0C0C0D;
      font-size: 26px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 33px;
      margin-bottom: 33px;
    }
    hr {
      width: 50%;
      border: 0;
      height: 1px;
      background: #333;
      background-image: linear-gradient(to right, #ccc, #333, #ccc);
    }
    p {
      color: #0C0C0D;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 20px;
    }
  </code></pre>
  <p>With the above css it looks terrible (iPhone view):</p>
  <p><a href="https://i.stack.imgur.com/0AZBk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0AZBk.png" alt="enter image description here" /></a></p>