How to Position Text Above a Horizontal Rule?

Question

I want to position text above a rule and to the right of a heading, as shown at the bottom of the below image.

This is my HTML:

  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
  <hr>

(I currently have no CSS for the 'character' class, since I've got nothing working.)

I've tried aligning the text, using CSS to float or position and the closest I've gotten is getting the in line with the rule, but it cuts it off at the end.

Can anyone offer some assistance?

Answer 1

Try with flexbox

.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-container h2 {
  margin-bottom: 0;
  align-self: flex-end;
}
.flex-container span.category {
  align-self: flex-end;
  font-style: italic;
  font-size: 14px;
}

<div class="flex-container">
  <h2>Heading</h2>
  <span class="category">Characters</span>
</div>
<hr>