title: Creating a horizontal line between span and paragraph with flexbox
body: <p>Is there a way that I can have a horizontal line between the span and paragraph. The line should have the same width as the paragraph. <strong>How can I accpomplish this?</strong>
  I can't use a div because then it will be recognized as a flex item and it will put next to the paragraph. </p>
  
  <p>If you need any further information. Just let me know.</p>
  
  <p><strong>rentout.html.erb</strong></p>
  
  <pre><code>&lt;div class="vorteil_wrapper"&gt;
      &lt;div class="rentout_content_left"&gt;
          &lt;p class="rentout_paragraph"&gt;
              &lt;span class="rentout_heading"&gt;Erstellung eines professionellen Inserats&lt;/span&gt;&lt;/br&gt;
              Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos,
              welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite 
              genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung
              und Präsentation Ihrer Unterkunft, welche die Highlights sowie die
              Atmosphäre Ihrer Unterkunft in Vordergrund setzt.
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="rentout_picture_right"&gt;
          &lt;%= image_tag("inserat.png", alt: "inserat", :class =&gt; "inserat") %&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="vorteil_wrapper_reverse"&gt;
      &lt;div class="rentout_content_right"&gt;
          &lt;p class="rentout_paragraph"&gt;
              &lt;span class="rentout_heading"&gt;Responsive Webdesign&lt;/span&gt;&lt;/br&gt;
              Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen!
              Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten
              angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu
              steigern.
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="rentout_picture_left"&gt;
          &lt;%= image_tag("responsive_webdesign.png", alt: "responsive webdesign", :class =&gt; "responsive_webdesign") %&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>application.scss</strong></p>
  
  <pre><code>.vorteil_wrapper {
    height: 200px;
    margin-bottom: 0px;
    display: flex;
    justify-content: space-around;
  }
  
  .vorteil_wrapper_reverse {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
  }
  
  .rentout_content_left {
    height: 200px;
    width: 100%;
    padding-right: 30px;
    display: flex;
    align-items: center;
  }
  
  .rentout_content_right {
    height: 200px;
    width: 100%;
    padding-left: 30px;
    display: flex;
    align-items: center;
  }
  
  .rentout_heading {
    font: 28px Raleway-Medium, sans-serif;
    margin-bottom: 6px;
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: red;
  }
  
  .rentout_paragraph {
    text-align: justify;
    font: 18px Raleway-Regular, sans-serif;
  }
  </code></pre>
  
  <p>This here is trying to solve the problem with position: absolute. The issue is that every heading starts on a different height because the elements(paragraph/span) inside the div(rentout_content_left/rentout_content_right) are centered and the number of characters in every paragraph and span vary.</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>.rentout_wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
  }
  .vorteil_wrapper {
    height: 200px;
    margin-bottom: 0px;
    display: flex;
    justify-content: space-around;
    position: relative;
  }
  .vorteil_wrapper_reverse {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
  }
  .rentout_content_left {
    height: 200px;
    width: 100%;
    padding-right: 30px;
    display: flex;
    align-items: center;
  }
  .rentout_content_right {
    height: 200px;
    width: 100%;
    padding-left: 30px;
    display: flex;
    align-items: center;
  }
  .rentout_heading {
    font: 28px Raleway-Medium, sans-serif;
    margin-bottom: 6px;
    display: inline-block;
  }
  .rentout_heading::after {
    content: "";
    position: absolute;
    border-bottom: 1px solid red;
    left: 0;
    bottom: -5px;
    width: 100%
  }
  .rentout_paragraph {
    text-align: justify;
    font: 18px Raleway-Regular, sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rentout_wrapper"&gt;
    &lt;div class="vorteil_wrapper"&gt;
      &lt;div class="rentout_content_left"&gt;
        &lt;p class="rentout_paragraph"&gt;
          &lt;span class="rentout_heading"&gt;Erstellung eines professionellen Inserats&lt;/span&gt;
          &lt;/br&gt;
          Wir besuchen Ihre Unterkunft und erstellen professionelle Fotos und Videos, welche nach der Bearbeitung für Ihr Inserat auf unserer Internetseite genutzt werden. Darüber hinaus verfassen wir eine hochwertige Beschreibung und Präsentation Ihrer Unterkunft,
          welche die Highlights sowie die Atmosphäre Ihrer Unterkunft in Vordergrund setzt.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="rentout_picture_right"&gt;
        &lt;img src="//lorempixel.com/200/192"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="vorteil_wrapper_reverse"&gt;
      &lt;div class="rentout_content_right"&gt;
        &lt;p class="rentout_paragraph"&gt;
          &lt;span class="rentout_heading"&gt;Responsive Webdesign&lt;/span&gt;
          &lt;/br&gt;
          Wussten Sie das 65% aller Internet Nutzer ein Handy zum Surfen benutzen! Ihr zukünftiges Inserat wird auf unserer Seite optimal auf allen Geräten angezeigt, um somit die Benutzerfreundlichkeit und die Umsatzrate zu steigern.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="rentout_picture_left"&gt;
        &lt;img src="//lorempixel.com/200/192"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/SmrPA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SmrPA.jpg" alt="enter image description here"></a></p>