css - A problem with aligning three elements horizontally, where the middle element grows to take up available space

Question

My goal is to horizontally align three elements, where the middle element is an <hr> that takes up all available space(width: 100%) pushing the outer two elements to the sides.

The result would be like this: AAA-------BBB, where the <hr> element is represented with the hyphens.

What I've tried

I've experimented with display: inline-block but with no luck.

div {
  display: inline-block;
  background: #777;
}

hr {
  width: 100%;
}

<div>
  <h1>AAA</h1>
  <hr />
  <article>
    <p>BBB</p>
  </article>
</div>

Answer 1

The best way to go about this is to use CSS Flexbox. The guys at CSS Tricks have a really good guide on the technology.

A Complete Guide to Flexbox by Chris Coyier

flex-grow: This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.

div {
  display: flex;
  background: #777;
}

hr {
  flex-grow: 1;
}

<div>
  <h1>AAA</h1>
  <hr />
  <article>
    <p>BBB</p>
  </article>
</div>