CSS: Place text at beginning of centered headline - html

Question

I want to place a short texte at the beginning of a centered headline.
My current solution is to have a container with display inline arround the headline
and placing the text with text right and display block.
This works pretty good until the I have a long headline.
The HTML:
<div class="article">
<div class="headline-container">
<span class="headline-companion">FooBar</span>
<h3>Sample Headline</h3>
</div>
</div>
THE SCSS:
.article{
display:block;
width: 700px;
margin: 50px auto;
padding: 20px;
text-align: center;
}
.headline-container{
display: inline-block;
margin: 0 auto;
text-align: center;
position: relative;
h3{
font-size: 40px;
margin: 0;
padding: 0;
display: inline;
}
.headline-companion{
margin: 0;
padding: 0;
display: block;
text-align: left;
}
}
http://codepen.io/anon/pen/PwNJGy
Are there any solutions where I don't have to position the text with absolute?
Clarification:
I want that the Short text beggins always at the first letter of the headline no matter how long the centered headline is.

Answer 1

Something like what (I think) you want to do can be accomplished if you wrap your <h3> tag in another element and set a max-width value, and by specifying word-wrap.
This allows you to change the width of the parent divs, or length of the header text without having very negative effects on the overall formatting:
[Edit]: In addition, another element needs to be added if you want to have the headline-companion and headline centered with respect to article but with left justified text... in this case sub-headline-container.
.article {
display: block;
width: 800px;
margin: 50px auto;
padding: 20px;
text-align: center;
}
.headline-container {
display: inline-block;
margin: 0 auto;
text-align: center;
position: relative;
}
.headline-wrap {
word-wrap: break-word;
max-width: 800px;
text-align: left;
}
.headline-companion {
margin: 0;
padding: 0;
display: block;
text-align: left;
}
<div class="article">
<div class="headline-container">
<div class="sub-headline-container">
<span class="headline-companion">FooBar</span>
<div class="headline-wrap">
<h3>
Sample Headline
</h3>
</div>
</div>
</div>
</div>
<div class="article">
<div class="headline-container">
<div class="sub-headline-container">
<span class="headline-companion">FooBar</span>
<div class="headline-wrap">
<h3>
SUUUUUUPPPPERRRRRRRR BIG HEADLINE!!! ------------------------------- --------------
</h3>
</div>
</div>
</div>
</div>