Centering text and image side by side - html

Question

I am stuck with a CSS problem and I am calling out for your expertise to help me!
I am trying to align text and image. Text and image should be vertically centered, left aligned and fit right next to each other. Both elements should be contained inside the wrapper div that can have varying width.
Below is code that I have so far:
<style>
.cell {
width: 150px;
height: 200px;
box-shadow: 0 0 0.5em #999;
white-space: nowrap;
}
.text_element {
height: 100%;
display: inline-block;
white-space: normal;
float: left;
}
.tooltip_element {
height: 100%;
display: inline-block;
}
</style>
<div class="cell">
<div class="text_element"> This is some random, random text.</div>
<div class="tooltip_element">
<img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png"/>
</div>
</div>
Above code produces next image when the wrapper content is 500px:
In the above image elements fit correctly next to each other, but aren't vertically aligned.
For width 200px, we get another problem however:
Here we get empty space between text and image, which shouldn't be there, as image should fit right next to the text. Furthermore image element is now outside the div.
Note that:
wrapper content can have varying width
solution should work in all browsers (no flex solutions)
no JS, only CSS can be used
Thank you very much for your help!
EDIT:
Text should be left aligned!

Answer 1

Ok, here it is:
.cell {
width: 210px;
height: 200px;
box-shadow: 0 0 0.5em #999;
white-space: nowrap;
padding-right: 30px;
}
.text_element {
display: inline-block;
white-space: normal;
float: left;
text-align: justify;
position: relative;
}
.tooltip_element {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
<div class="cell">
<div class="text_element">This is some random, random text. Moar random text. And moar, moar random text...
<div class="tooltip_element">
<img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png" />
</div>
</div>
</div>
Please note I included the tooltip element inside the text element. So I could vertically align them. If they must be siblings, I'd need to wrap them both in a container for vertical centering without flex-box.
If you prefer jsFiddle, to play around with cell width, here it is.

Answer 2

You can use css table https://jsfiddle.net/2Lzo9vfc/247/
CSS
.cell {
width: 100%;
height: 200px;
box-shadow: 0 0 0.5em #999;
word-break:break-all;
}
.text_element {
display: table-cell;
vertical-align: middle;
}
.tooltip_element {
display: table-cell;
vertical-align: middle;
}