title: CSS: Place text at beginning of centered headline
body: <p>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.</p>
  
  <p>This works pretty good until the I have a long headline.</p>
  
  <p>The HTML: </p>
  
  <pre><code>&lt;div class="article"&gt;
    &lt;div class="headline-container"&gt;
      &lt;span class="headline-companion"&gt;FooBar&lt;/span&gt;
      &lt;h3&gt;Sample Headline&lt;/h3&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>THE SCSS:</p>
  
  <pre><code>.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;
    }
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/PwNJGy" rel="nofollow noreferrer">http://codepen.io/anon/pen/PwNJGy</a></p>
  
  <p>Are there any solutions where I don't have to position the text with absolute?</p>
  
  <p><strong>Clarification</strong>:
  I want that the Short text beggins always at the first letter of the headline no matter how long the centered headline is.  </p>
  
  <p><img src="https://i.stack.imgur.com/jNl5v.jpg" alt="Example of different length headline"></p>