title: Align element to bottom of HTML Table Cell
body: <p>I have multiple elements in a cell of an HTML table. I want some of the elements to be aligned to the bottom of the cell and some to be aligned at the top. I am having trouble getting the elements to align to the bottom. My table is: </p>
  
  <pre><code>    &lt;tr&gt;
          &lt;td style="background-color: #007CE2"&gt;
              &lt;p id="t1_list"&gt;test&lt;br&gt;another&lt;br&gt;testing&lt;/p&gt;
              &lt;input type="text" name="t1_input" id="t1_input"&gt;
              &lt;button&gt;
                  Add
              &lt;/button&gt;
          &lt;/td&gt;
          &lt;td style="background-color: #E54040"&gt;
              &lt;p id="t2_list"&gt;&lt;/p&gt;
              &lt;div class="value_input2"&gt;
                  &lt;input type="text" name="t2_input" id="t2_input"&gt;
                  &lt;button&gt;
                      Add
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p>However the elements within the div seem to want to stay centered in the cell, rather than stay at the bottom. I have tried two different methods so far with CSS:</p>
  
  <pre><code>div.value_input {
      position: absolute;
      bottom: 0;
  }
  </code></pre>
  
  <p>which just takes the div down to the bottom of the page. And:</p>
  
  <pre><code>div.value_input2 {
      display: table-cell;
      vertical-align: bottom;
  }
  </code></pre>
  
  <p>Which has no effect.</p>
  
  <p>I have the code here in <a href="https://jsfiddle.net/top8tpe7/6/" rel="noreferrer">JSFiddle</a></p>
  
  <p>What do I need to do to get the input box and button to align to the bottom of the cell?</p>