HTML & CSS: Row with image and scrollable text having height adjusted to the image size

I will show how, using CSS only, to set the height of the text in a row so it never exceeds the height of the image, and then if the long text exceeds the height, make it scroll. The image dimensions may vary and are not known at the implementation phase.

The goal

The thing I need to do is:

Row with height adjusted to the height of the image, with scrollable text

The solution

Please take a look here: https://jsfiddle.net/an1gsdm0/

I wrapped the whole row in a table-row. The image and the text are the table-cells in it. The text’s table-cell has inline-block div with text inside. You can test it by manipulating the .image class size. Then the text field height will adjust. Here is the code:

HTML:

<div class="container">
    <div id='first' class='img-div'>
        <img class="image" src='http://png-4.findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png'/>
    </div>

    <div class="outer-text">
        <div id='second' class='text-div'>Put a long text here...
        </div>
    </div>
</div>

CSS:

.container{
    display: table-row;
}

.img-div {
    display: table-cell;
    float: left;
}

.outer-text{
    display: table-cell;

    height: 100%;
    width: 190px;
}

.text-div{
    display: inline-block;

    height: 100%;

    overflow-y: auto;
}

To test it for custom various image sizes change the height of the image:

.image{
    height: 190px;
}