CSS：使用剩余宽度的100％

Question

我正在制作一个包含图像，标题，按钮，源代码的列表，并且在使用剩余宽度的100％时遇到问题。

我的主要问题是我无法使<textarea>使用所有剩余的宽度和高度。

这里就是我得到：

而我打算有：

下面的源代码，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> 

谢谢。

SOLUTION： 套装vertical-align:top;为每个表细胞