HTMLの要素を下揃えする方法

【実現したいこと】

上の図において、要素１と要素２の下面を揃えたい。

【よく見る方法は...】

・親要素に「position:relative;」
・子要素に「position:absolute;」、「bottom:0;」
とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript（jQuery）で実現する方法を記載します。

【JavaScriptでの実現方法（考え方）】

上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。

「D」=「A」-「B」-「C」

この「D」を要素２の「margin-top」に追加してあげます。

今回は、レスポンシブ（RWD）に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。

【実装】

jQuery(document).ready(function() {

  adjustPosition();
 
  $(window).resize(function () {
    adjustPosition();
  });

  function adjustPosition(){
      var heightA = $("要素１").outerHeight();
      var heightB = $("テキスト部").outerHeight();
      var heightC = $("要素２").outerHeight();
      var heightD = heightA - heightB - heightC;
      if (heightD > 0) {
        $("#要素２").css("margin-top", heightD + "px");
      }
  } 
});

【解説】

特に難しいことはしていませんが、初回とウィンドウリサイズ時に、それぞれの要素の高さを取得して（outerHeightは、padding, border, marginを含めた高さ）、テキスト（B)と要素２（C)が、要素１（A）の高さを超えていなければ、「D」を要素２のmargin-topに設定してあげます。
※ブラウザの幅を狭めたときに、テキスト部の高さが高くなってしまい、テキスト部と要素２が要素１より高くなってしまった場合は、何もしません。（レスポンシブなので一列に縦積みした方が良いでしょう。）

以上です。