This is my HTML:

```
<div class='htmlCommentTable'>
    <div class='row'>
        <div class='firstDiv'>
            <img class='clickedFlame' src="image.png" />
        </div>
        <div class='secondDiv'>
            name <br /> first comment sample text here
        </div>
    </div>

    <div class='row'>    
        <div class='firstDiv'>
            <img class='clickedFlame' src="image.png" />    
        </div>
        <div class='secondDiv'>
            name <br /> second comment sample text here
        </div>
    </div>
</div>

```

and this is my CSS:

```
    .htmlCommentTable {
        width: 100%;
    }

    .firstDiv {
        display: inline-block;
        width: 90px;
    }

    .secondDiv {
        display: inline-block;
    }

    .row {
        width: 100%;
     }

```

Each row should have a 90px image (firstDiv) with another div beside it. 

Cuurently, if I shrink the screen small enough so that it reaches the text inside secondDiv, then secondDiv goes below firstDiv rather than staying beside firstDiv.

How do I make it so that the div beside the 90px div (secondDiv) has a width of 100% of what is left inside the row (the row's width is 100%, the secondDiv's width should be 100%-90px - 90px is the width of firstDiv).
I need it so that when I shrink the screen / browser, the firstDiv's width remains at 90px and the secondDiv's width remains at 100%-90px, and only the height of the div increases (and secondDiv remains beside firstDiv, it doesn't go below firstDiv) if the screen becomes so small that the text inside secondDiv needs to be on more than one line.

Is it possible to do what I want? I tried giving secondDiv a width of 100% but that just puts secondDiv below firstDiv rather then beside firstDiv.