Html 在两列引导中隐藏对象会中断格式设置

我有一个多节手风琴，有两根柱子。页面设置如下所示：

<div class="panel-group" id="Accordion">
<div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#Accordion" data-target="#ApplicantInfo">
        <h4 class="panel-title">
            <a class="accordion-toggle">
                Applicant Information:
            </a>
        </h4>
    </div>
    <div id="ApplicantInfo" class="panel-collapse collapse in">
        <div class="panel-body">
            <div class="row">
                <div id="divApplicant" class="col-xs-6">Applicant:</div>
                <div id="divApplicantPhone" class="col-xs-6">Applicant Telephone:</div>
            </div>
            <div class="row spFieldRow">
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantName" ...>
                  </span>
                </div>
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantPhone" ...>
                  </span>
                </div>
            </div>              
            <div class="row">
                <div id="divApplicantEmail" class="col-xs-6">Applicant Email:</div>
                <div id="divApplicantType" class="col-xs-6">Applicant Type:</div>
            </div>
            <div class="row spFieldRow">
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantEmail" ...>
                  </span>
                </div>
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantType" ...>
                  </span>
                </div>
            </div>
        </div>
    </div>
</div>

之后：

我尝试过影响整行，甚至在标签和输入容器周围添加了一个div容器，并将其隐藏起来。没关系，第二排向上移动并收缩。
请客气一点，我对bootstrap非常陌生（我是第一次），近年来没有做过太多的前端开发。我感谢任何帮助

编辑：
我创建了一个尽可能接近这一点的JSFIDLE，但无法重新创建问题（）

我完全忘记了前面提到的内容，但此页面位于SharePoint网站上，因此正在加载所有其他类型的css。我猜是其中一个在碍事。如果有人以前看到过这一点，我将不胜感激。
我不确定这是否是您想要的，但您可以随意显示/隐藏面板，而不是动态添加面板本身

（您仍然可以根据需要动态地将内容添加到每个面板中，而不是面板-它们充当动态内容的容器）

参见下面的演示（在下拉框中选择申请人类型）：


$（函数（）{
$（“选择”）。在（“更改”，函数（）上{
如果（$（this）.val（）=='Internal'）{
$（“#外部面板”）.collapse（'hide'）；
$（“#internalPanel”）.removeClass（'hide'）；
$（“#内部面板”）.collapse（'show'）；
}else if（$（this.val（）='External'）{
$（“#内部面板”）.collapse（'hide'）；
$（“#外部面板”）.removeClass（'hide'）；
$（“#外部面板”）.collapse（'show'）；
}否则{
$（“.secondary panel”）.collapse（'hide'）；
}
});
});

申请人资料：
申请人：
申请人电话：
申请人电邮：
申请人类别：
内部的
外部的
外部面板
外部面板内容
内部面板
内部面板内容
如果您可以使用css代码更新您的问题，这将非常有用。您是否也可以将代码缩减为a（包括css/JS）？这将大大加快我们为您找到解决方案/答案的速度。。。谢谢你的意见。我制作了一个MCVE，并将其添加到我最初的帖子中。我还添加了一些关键信息，真不敢相信我竟然忘了。感谢您的输入。很抱歉，我看不到您在创建的JSFIDLE中描述的问题。这些文件必须是完整的、可验证的。（这里没有JS）-此外，最好在问题中包含代码；如果链接因任何原因中断，该问题将是不完整的，对社区中的其他人没有多大帮助