I'm making a list consisting of an image, title, buttons, source code and am having a problem with using 100% of the remaining width.

My main problem is that I'm not being able to make a `<textarea>` use all the remaining width and height.

Here's what I'm getting:
![enter image description here](https://i.stack.imgur.com/S84Vc.png)

And what I intend to have:
![enter image description here](https://i.stack.imgur.com/AFLmY.png)

Below the source code, CSS:

```
.listing {width:100%;background:#f1f1f1;display:table;}
.leftimage {clear:none;display:table-cell;padding:20px;}
.listing .information {padding: 20px;width:100%;display:table-cell;}
.listing .information .title {font-size:20px;color:#016b98;}
.listing .information .title a {color:#016b98;text-decoration:underline;}
.listing .information .outsideButton {float:left;padding-top:5px;padding-right:5px;clear:none;}
.listing .information .outsideButton {clear:right;}
.listing .information .outsideButton .button {border: 1px solid #626262;background:#d8d8d8;}
.listing .information .outsideButton .button .label {padding:5px;}
.listing .information .outsideButton .button .label a {color:#626262;}

```

HTML:

```
<div class="listing">

                    <div class="leftimage">
                        <div style="height:150px;"><!-- Allows to change image position on click without changing .listing size -->
                            <a><img class="preview" height="150px" src="img.png"></a>
                        </div>
                    </div>

                    <div class="information">
                        <div class="title">
                            <a>TITLE</a>
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 2</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 3</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 4</a>
                                </div>
                            </div>                              
                        </div>
                        <div class="outsideButton">
                            <div class="button">
                                <div class="label">
                                    <a>BUTTON 5</a>
                                </div>
                            </div>                              
                        </div>
                        <!-- END OF BUTTONS -->

                        <!-- HERE I WANT TO DISPLAY THE TEXTAREA WITH HTML CODE -->
                        <div style="float:left;padding-top:10px;clear:left;width:100%;">
                            <textarea style="padding:0;margin:0;width:100%;"><?php echo htmlspecialchars("<div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?></textarea>
                        </div>
                        <!-- END OF TEXTAREA WITH HTML CODE -->

                    </div><!-- END OF .information -->
                </div>

```

Thanks.

**SOLUTION:**
Set `vertical-align:top;` for every table-cell