Display Inline horizontal rule using simple CSS flex design (Source: https://codepen.io/oaviv/pen/GqXwYp | Author: Ohad)

liner.css

/** Source: https://codepen.io/oaviv/pen/GqXwYp | Author: Ohad **/

body {
  padding: 50px;
  background-color: #11151C;
  color: #7D4E57;
  line-height: 170%;
  font-family: sans-serif;
}
body .container {
  width: 80%;
  margin: 0 auto;
}
body .container .nest {
  width: 50%;
  margin: 40px auto;
  border: solid 1px;
  padding: 20px;
}

h1, h2, h3 {
  color: #D66853;
}

button {
  border-radius: 5px;
  height: 35px;
  border: 0;
  padding: 0 10px;
  background-color: #D66853;
  color: #7D11151C4E57;
}

.liner {
  display: flex;
  align-items: flex-start;
  text-align: left;
}
.liner:after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: #D66853;
  min-width: 20px;
  margin: auto;
}
.liner:after {
  margin-left: 20px;
}

liner.html

<!-- Source: https://codepen.io/oaviv/pen/GqXwYp | Author: Ohad -->

<div class="container">
  <h1 class="liner">Good for titles</h1>
  <h2 class="liner">...And subtitles</h2>
  <p class="liner">Even for a long a$$ blocks of text</p>
  <p class="liner">
    <button>Works with any element</button>
  </p>
  <div class="nest">
    <h3 class="liner">Nested</h3>
    <Lorem>ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus, nulla non aliquet consequat, lectus sem viverra lacus, vitae consectetur nulla ante at enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce a elementum tortor, facilisis hendrerit nisl. Vestibulum sed venenatis risus. Donec pretium fringilla nisi, vitae finibus nulla vulputate at. Donec eleifend sem ipsum, quis bibendum neque condimentum non. Nam varius vehicula ligula id suscipit. Duis nec sem quis diam posuere mollis. In hac habitasse platea dictumst. Phasellus vitae euismod mi. Nulla in sollicitudin diam.</Lorem>
  </div>
</div>