Text Aligning with Borders - html

Question

There is probably a wide array of bad practice that I'm using, as I am a beginner when it comes to HTML and CSS, so please keep that in mind when down-voting this post into the darkest depths of the Internet. My problem is that I want to make a line of text that interrupts a horizontal border, but then I want text after it that is aligned with the original text. Here's the code that I have so far.
HTML:
<h2 style = "float:left; width:500px"><span>This is a test</span></h2>
<div id = "test">
<p>Other stuff</p>
</div>
CSS:
h2 {
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 50px;
position: relative;
float: left;
}
I want it to look like this:
-----This is a test -------------------------------
Other Stuff|
The effect I am trying to get is basically a corner. The vertical line after "Other stuff" should link into the line coming from the "This is a test". I am having trouble aligning the text.Right now my vertical line goes above the horizontal line. My apologies again for all of the bad practice I am probably displaying, but I would really appreciate any help for this. CSS is a horrible time for me. Thanks in advance.

Answer 1

Wrap both inside a common position:relative; parent
and set the #test to be position:absolute top and right:
.container{ /* added */
width:500px;
position:relative; /* in order to contain absolute children */
}
h2 {
/*float:left; no need to */
/*width:500px; now container has it */
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 50px;
/*position: relative; set to absolute! */
position:absolute;
top:2px; /* added */
right:0; /* added */
/*float: left; no need to */
}
<div class="container">
<h2><span>This is a test</span></h2>
<div id = "test">
<p>Other stuff</p>
</div>
</div>

Answer 2

You should take care to keep in mind the framework of your site when positioning these items, but if you enlarge the div to fit the text without wrapping and then you can use margins to position the item where you want since it is already floating. Use this css:
h2 {
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 75px;
position: relative;
float: left;
margin-top: 12px;
margin-left: -75px;
}