title: HTML dock to bottom
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="gallery-item"&gt;
    &lt;a href="ddd.pdf" style="display:block; width: 100%;"&gt;
      &lt;span id="filename_1" style="white-space: nowrap;"&gt;Hello&lt;/span&gt;
    &lt;/a&gt;
    &lt;div id="commands"&gt;
      &lt;input type="text" readonly="readonly" value="https://blob"&gt;
      &lt;a href="sdfasdfasdfasdf"&gt;Delete&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.gallery-item {
    border: 1px #AAA solid;
    display: inline-block;
    margin: 2px;
    padding 2px;
    width: 130px;
    height: 90px;
    text-align: center;
    border-radius: 5px;
    vertical-align: middle;
  }    
    .gallery-item #commands {
      line-height: 4px;
      padding-bottom: 1px;
      vertical-align: bottom;
      bottom: 1px;
    }
  </code></pre>
  
  <p>I want to align <code>commands</code> div to the bottom of <code>gallery-item</code> classed div. None of the above worked, the <code>commands</code> sticks to the preceding element:</p>
  
  <p><img src="https://i.stack.imgur.com/uySB8.png" alt="enter image description here"></p>