title: Vertical-Align list item to bottom
body: <p>I've read through plenty of related articles on this site and others and it seems I'm still missing something pretty basic.</p>
  
  <p>I have a parent div and an unordered list. The div has a set height and I want to list items to be inline-line and on the bottom of the parent div.</p>
  
  <p>Thanks! </p>
  
  <p>Fiddle:
  <a href="http://jsfiddle.net/np2qm6rz/1/" rel="nofollow">http://jsfiddle.net/np2qm6rz/1/</a></p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;ul&gt;
          &lt;li&gt; Item 1 &lt;/li&gt;
          &lt;li&gt; Item 1 &lt;/li&gt;
          &lt;li&gt; Item 1 &lt;/li&gt;
          &lt;li&gt; Item 1 &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  .parent {
      border: 1px solid lime;
      height: 100px;
  }
  ul {
      border: 1px solid black;
  }
  li {
      border: 1px solid red;
      display: table-cell;
      vertical-align: bottom
  }
  </code></pre>