html - ラベルが表のセルにスペースを作らない

Question

だから私はテーブルセルのラベルに問題があり、それ自体のためのスペースを作っておらず、代わりに兄弟の後ろにいるのに、兄弟の内側のスペースを占有していますか?

私が何を意味するかを示すために JSFiddle を作成しました: http://jsfiddle.net/8yzLP/

表のセル内にある div 内にラベルがありますが、兄弟の div によって隠されています。

構造マークアップは次のとおりです。

<table>
    <tr>
        <td class="trip-finder-table-cell">
            <div class="trip-finder-sort-by-container">
                <label>Sort By</label>
                <div class="selectList_container trip-finder-sort-by-select" tabindex="0" style="position: relative;">
                    <p class="selectList_value">
                        <span class="selectValue_content" style="cursor: pointer; display: block; text-align: left;">Sort Option</span>
                        <span class="select-carat" style="cursor: pointer;"></span>
                    </p>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS はあちこちから来ていますが、JS フィドルで問題を再現するために必要な要素を含めました。それらは次のとおりです。

td.trip-finder-table-cell {
width: 17%;
padding: 15px 1.25%;
vertical-align: top;
position: relative;
}

td.trip-finder-table-cell > div[class*=trip-finder] {
position: relative;
}

td.trip-finder-table-cell > div > label:not([for]) {
display: inline;
float: left;
line-height: 30px;
margin-right: 5px;
}

.selectList_value {
padding: 4px 0 4px 10px;
width: 100%;
}

.select-carat {
display: block;
width: 25px;
height: 25px;
position: absolute;
float: right;
right: 3px;
top: 2px;
background: transparent url('../img/global/forms/select-carat.png') no-repeat center center;
}

.selectList_options {
overflow: hidden;
max-height: 250px;
overflow-y: auto;
position: relative;
top: 5px;
background: #fff;
background: rgba(255,255,255,.9);
border: 1px solid #ccc;
}

.selectList_container {
min-width: 110px;
border: 1px solid #cccccc;
background: #fcfcfc;
position: relative;
}

これを期待どおりに機能させるために考えられるすべてのことを試しました（ラベルを左側に、兄弟を右側に）が、何を試してもうまくいきません。多分誰かが私を助けるのに十分親切でしょうか？