How to Position Text Above a Horizontal Rule? - html

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>

Answer 2

use can also use this
.category
{
position: absolute;
right: 0px;
}
h2
{
position:absolute
left:0px;
}

Answer 3

You can use floating in order to achieve that like first item will be float: left; and second item will be float: right; an other solution will be display: inline-block; and you can also use 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>
.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>