Text vertical-align with another element - html

Question

In the following snippet, I have a title and an image, both divs are within a container div. the image is floated right and will have a fixed height of 80px. What I want is title on the left, image on the right side of the same row, and the text the bottom aligned with the image. First I tried inline-block on .text-element and inline on .text-element-content, but vertical-align doesn't seem to work there. After a few tries and some reading, I came up with the following solution with display: table/table-cell, plus setting a fix height for .text-element, then the vertical-align: bottom worked. But then I saw another (small) problem. Now the lowerste point of "p" in title text is on the same line with the bottom line of image. But I want the bottom of other letters like "e", "d", "t" on the same line with the image-bottom line. I tried vertical-align: baseline but it seems it is for something else entirely... Is there a way to achieve what I want? And is there a better way to get vertical-align: bottom without table/table-cell? For certain reason, I may not change the DOM, only the CSS on it, and I may not use flex-box either.
The solution with a different line-height won't solve my problem entirely because it only works with this special case and as soon as the font is changed, I'll need another line-height.
.container-element {
position: relative;
}
.image {
float: right;
}
.text-element {
display: table;
height: 80px;
}
.text-element-content {
display: table-cell;
vertical-align: bottom;
}
<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>

Answer 1

You could try adjusting the line-height property for the text:
.container-element {
position: relative;
border-bottom: 1px solid red;
}
.image {
float: right;
}
.text-element {
display: table;
height: 80px;
line-height: .7;
}
.text-element-content {
display: table-cell;
vertical-align: bottom;
}
<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>

Answer 2

Even though you stated, that you cannot use flex-box (because of IE), I will answer with a flex-box solution. IE11 works fine with flexbox. See Known issues on caniuse.com.
Combined with order a solution could look something like this:
.container-element {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.image {
order: 2;
}
.text-element {
order: 1;
}
<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>

Answer 3

This should do it inspired by bootstrap.
.container-element {
position: relative;
}
.media-left,.media-right {
display: table-cell;
vertical-align: top
}
.media-right {
padding-left: 10px
}
.media-left {
padding-right: 10px
}
.media-bottom {
vertical-align: bottom
}
<div class="container-element">
<div class="media-left media-bottom">
I'm a title with help
</div>
<div class="media-right">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
</div>