How to fit the image in the parent unit?

Help, if at all possible, to implement this thing:

As such, it really just - https://jsfiddle.net/EugSan/2pz9gcdq/
But the text on the right can be any number. And when it becomes many, the picture remains hanging box on the left https://jsfiddle.net/EugSan/0tdywuvh/

And I would like to have the image without distorting the proportions remained the same in width, but over the full height of the block (left and right of the picture respectively to be circumcised):

This is done through a background image from the parent block and background-size set to cover - https://jsfiddle.net/EugSan/j7fh3535/
This behavior will make me happy. Well, except that you can additionally ask from .teaser of some min-height to the picture is absolutely not "shapefiles" when the text is one and a half lines. It's the little things, and will not for sure in reality this situation.

But I would like to implement this not using a background image, and it is through img.
JS too do not want to use, at least with him and everything just gets.

In General, you need to use the img tag and using css only. Let it will not work in ancient browsers, it is not so important.

Perhaps this is easy to do, but something I did not think of...