title: How can I align one content div to the middle and another to the bottom?
body: <p>I have these divs, how could I go about aligning <code>.Div1</code> in the middle and <code>.Div2</code> in the bottom?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Div1 {
    background: rgb(0, 0, 0);
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(9, 9, 121, 1) 25%, rgba(0, 212, 255, 1) 100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Div1" style="width: 100%; height: 100%; color: rgb(255, 255, 
                    255); border-collapse: collapse; font-size: 30px;  position: relative"&gt;
    I-BS
    &lt;div class="Div2"&gt;
      &lt;p&gt;
        &lt;FONT size=auto&gt;
          &lt;STRONG&gt;A&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;B&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;C&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;D&lt;/STRONG&gt;
        &lt;/FONT&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>