jquery - div 内の入力を移動する方法はありますが、背景色を使用して css 内のオブジェクトの周りに div 選択ボックスを拡張します

Question

入力を含むdivがあります。div の内容は可変ですが、背景色で確認すると、周囲の div の高さと幅を拡張して入力を囲むにはどうすればよいですか。

サンプルは http://jsfiddle.net/fallenreaper/pL6Ua/にあります。

目標は、幅が調整されると、すべてのボックスが下に移動することです。

私は次のようなことを試しました：

position: relative;

しかし、周囲のdivを完全にラップしていません。私は何が欠けていますか？

編集： javascriptは、私が取り組んでいる拡張ツール用です。画面に表示されている項目は次のとおりです。

$alt_item

Edit2: div のコンテンツは動的であるため、すべてをプッシュして対応できるようにする必要があります。基本的には、*$("#dtr_list > div")* の高さを 80px に設定すると、次のようになります。

オプションとして Javascript を使用して、すべての子の最大 (高さ + 上) を見つけ、高さ = をそれに設定することを考えていました。

編集3:

var maxH = 0;
$($("#dtr_list > div")[0]).children().each(function(){
    $("#altdata").append("Top: "+$(this).position().top + " Height: "+ $(this).height()+ "<br />");
    if(($(this).position().top + $(this).height()- $(this).parent().position().top+5) > maxH)
    {
        maxH = $(this).position().top + $(this).height() - $(this).parent().position().top + 5;
    }
});
$("#altdata").append("maxH: "+maxH);
$("#dtr_list > div").css("height", maxH);

このJavaScriptはそれを解決しますが、プログラムで行う必要があるのは好きではありません. 私が追加した+5はマージンのためでしたが、+5をハードコードされた数字として次のように置き換えることができます:

Number($(this).parent().css("margin").match(/^\d/))