title: How to add horizontal line between text elements
body: <p>I am trying to add a line between two text elements, like the picture below in HTML, but I cannot. I can only add a line between &quot;Training Program&quot; and the other text will be in the next line.</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>h3 {
      position: relative;
  }
  
  h3 span {
      background-color: white;
      padding-right: 10px;
  }
  
  h3:before {
      content:"";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0.5em;
      width: 60%;
      border-top: 1px solid black;
      z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3 style="font-family:Montserrat"&gt;&lt;span&gt;Training program&lt;/span&gt;&lt;/h3&gt;
  &lt;h3 style="font-family:Montserrat; text-align:right; margin-top:10px"&gt;&lt;span&gt;Read more&lt;/span&gt;&lt;/h3&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to add a line like this picture. Can anybody help me?</p>
  <p><a href="https://i.stack.imgur.com/ZMkTG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZMkTG.png" alt="enter image description here" /></a></p>