How to place text over a horizontal rule?

Question

I want to place text above the rule and to the right of the title, as shown at the bottom of the bottom image.

This is my HTML:

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

(I currently do not have CSS for the "character" class, since I have nothing working.)

I tried to align the text using CSS to float or position, and the closest I got gets a match with the rule, but in the end it shortens it.

Can anyone help?

Answer 1

Try it with flexbox

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

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

Run codeHide result

Answer 2

floating , , , float: left;, float: right;, display: inline-block;, display:flex;

.float{overflow: hidden;}
.float h2{
  margin: 0;
  float: left;
}
.float .category{float: right;}


.inineblock{
  overflow: hidden;
  letter-spacing: -4px;
}
.inineblock h2{
  margin: 0;
  width: 50%;
  letter-spacing: 0;
  display:inline-block;
  vertical-align: top;
}
.inineblock .category{
  width: 50%;
  letter-spacing: 0;
  text-align: right;
  display:inline-block;
  vertical-align: top;
}

.flexbox{
  justify-content: space-between;
  display: flex;
}
.flexbox h2{
  margin: 0;
  align-self: flex-end;
}
.flexbox .category{align-self: flex-end;}

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

Hide result

.float{overflow: hidden;}
.float h2{
  margin: 0;
  float: left;
}
.float .category{float: right;}


.inineblock{
  overflow: hidden;
  letter-spacing: -4px;
}
.inineblock h2{
  margin: 0;
  width: 50%;
  letter-spacing: 0;
  display:inline-block;
  vertical-align: top;
}
.inineblock .category{
  width: 50%;
  letter-spacing: 0;
  text-align: right;
  display:inline-block;
  vertical-align: top;
}

.flexbox{
  justify-content: space-between;
  display: flex;
}
.flexbox h2{
  margin: 0;
  align-self: flex-end;
}
.flexbox .category{align-self: flex-end;}

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

Hide result

Answer 3

Using

can also use this

.category
{
        position: absolute;
        right: 0px; 
}
h2
{
         position:absolute
         left:0px;
}