Move span to the left within element

Question

I have a specific case where I have to float a span from the right to the left of the headline. Problem is that it needs to be CSS2 since it's for an epub2-book.

With what I have so far (see bottom) it looks good when it's one line:

but with less space, ergo when it's two lines, it ends up looking like this:

I guess it happens because the span is still actually at the end of the <h1>, so it moves to the bottom line. I tried this with and without vertical-align: top; or top: 0; but that didn't work.

span {
  float: left;
  display: inline-block;
  margin-right: 1em;
}

<h1>text hahaha I am such a cool text!
  <span>|left Text|</span>
</h1>

Is there any way to move the part to the beginning of the element? Or make it kind of float to the top? (Yeah, I know there's no float: top;)

Answer 1

If the width of your text is known you can hack it using position:absolute and text-indent

span {
  position:absolute;
  top:0;
  left:0;
  text-indent:0px;
}

h1 {
  position:relative;
  text-indent:140px;
}

<h1>text hahaha I am such a cool text!
  <span>|left Text|</span>
</h1>