title: Align Div Text Bottom
body: <p>For someone reason I can't get this <code>div</code>'s text to vertically align to the bottom I've tried just about everything except for solutions involving extensive code.</p>
  
  <pre><code>.products {
  width: 191.25px;
  height: 191.25px;
  margin-left: 15px;
  margin-bottom: 15px;
  padding: 15px;
  background: black;
  color: white;
  float: left;
  text-align: right;
  }
  
  &lt;h2&gt;Header Two&lt;/h2&gt;
  &lt;div class="products"&gt;Content for  class "products" Goes Here&lt;/div&gt;
  &lt;div class="products"&gt;Content for  class "products" Goes Here&lt;/div&gt;
  &lt;div class="products"&gt;Content for  class "products" Goes Here&lt;/div&gt;
  &lt;div class="products"&gt;Content for  class "products" Goes Here&lt;/div&gt;
  </code></pre>
  
  <p>If someone could help me fix my code so to vertically align the <code>div</code>'s text to the bottom.</p>
  
  <p>EDIT: 
  I have tried the following:</p>
  
  <p>Adding to <code>.product</code></p>
  
  <pre><code>display: table-cell;
  vertical-align: bottom;
  </code></pre>