title: Get table cells to collapse horizontally
body: <p>I am trying to have an image sitting next to some text. The text needs to sit halfway vertically on the image</p>
  
  <pre><code>[IMG]
  [IMG] Here is the text
  [IMG]
  </code></pre>
  
  <p>I am getting the following, because the two cell divs are equal width, instead of matching content width:</p>
  
  <pre><code>[IMG]
  [IMG]                                Here is the text
  [IMG]
  </code></pre>
  
  <p>The code is preexisting. There is a table container div:</p>
  
  <pre><code>.vertical-align-container {
      display: table;
      table-layout: auto;
      width: 100%;
  }
  </code></pre>
  
  <p>And two table cell divs:</p>
  
  <pre><code>.vertical-align-child {
      display: table-cell;
      vertical-align: middle;
      padding-left: 15px;
  }
  </code></pre>
  
  <p>So no matter what I do, the table cells are equal width. How can I get the first to match content width, and the second to fill the remainder of the container?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="vertical-align-container"&gt;
      &lt;div class="vertical-align-child" style="padding-left: 0;"&gt;
          &lt;img src="path/img.png"&gt;
      &lt;/div&gt;
      &lt;div class="vertical-align-child"&gt;
          &lt;p&gt;&lt;a href="#"&gt;Here is the text&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I've tried a couple things, but what I've included here is table-layout, which I though was supposed to do exactly this?</p>