Header, hr and btn at the same line [duplicate]

Question

I'm trying to display a header with a hr and a button at the same line. Something like this:

Header ------------------------------------ Button

I've tried with display flex, but the hr changed for a vertical line.

.flex-header {
  display: flex;
}

<div class="flex-header">
<h2> Des habitations pour tous </h2>
<hr/>
<button> Collections </button>
</div>

Answer 1

You could just use a <div> with some css to create a <hr>-like line;

.flex-header {
  display: flex;
}

.line {
  display: flex;
  flex-grow: 1;
  height: 1px;
  align-self: center;
  margin: 0 20px;
  background-color: grey;
}

<div class="flex-header">
<h2> Des habitations pour tous </h2>
<div class="line"></div>
<button> Collections </button>
</div>