html - float 要素内の位置

Question

カスタム ドロップダウンを作成しました。HTML は次のとおりです。

<div class='dropdown'>
    <div class='dropdownTitle'>Sort by<span class='select_arrow'></span></div>
    <ul class='selectPanel'>
        <li><input  type='checkbox' id='allProducts'><label for='allProducts'>Name</label></li>
        <li><input  type='checkbox' id='Enterprise'><label for='Enterprise'>Date</label></li>
        <li><input  type='checkbox' id='Security'><label for='Security'>Popularity</label></li>
        <li><input  type='checkbox' id='Data'><label for='Data'>Rating</label></li>
    </ul>
</div>

ほとんどの場合、これで問題なく動作しますが、ドロップダウンをフロートすると、内部の要素が期待どおりに表示されません。ラベルが大きくなると、パネルの幅が大きくなりません。jsfiddleを作成しました。

なぜこれが起こっているのか、そしてどのように解決するのかを誰かに説明してもらえますか?

ありがとう！