Javascript 添加数据时，为什么Select2元素出现在div的外部？

我正在使用select2元素选择名称。当我选择多个名称时，select2框将显示在div的外部。我只需要将select2框显示在div中

Html代码：

    <div class="row well container col-sm-12 col-lg-12">
    <h4 style="color:teal;font-weight:bold;">
        <center> Sales Entry Form</center>
    </h4>
    <div >
        <form class="form-inline" role="form">
            <div class="form-group">
                <input type="text" id="sales_entry_date" class="form-control" placeholder="Select Date">
            </div>
            <div class="form-group">
                <input id="sales_entry_retailer" type="hidden"  style="height: 33px;width: 100%;" placeholder="Select Retailer" />
            </div>
        </form>
    </div>
    <div >
        <hr>
    </div>
    <div  id="sales_entry_form_div">
        <table class="table table-striped table-bordered table-condensed" id="sales_entry_table" >
            <thead id="sales_entry_head"></thead>
            <tbody id="sales_entry_body"></tbody>
            <tfoot id="sales_entry_foot"></tfoot>
        </table>
    </div>
</div>

在这里，我将select2框应用于隐藏类型。

---

提前感谢。

您能发布JSFIDLE吗？我通过删除输入元素中的{style=height:33px；width:100%；}解决了这个问题。感谢您的回复@Atul Nar