Javascript 调整两个元素的大小，使它们在底部对齐

我有一个具有以下布局的弹出窗口：

如果我能把右边的大盒子做得更高，这样两个大盒子在底部对齐，那就太好了

我可以在我的电脑上通过设置右边盒子的高度来做到这一点，这样底部就会排成一行。但是，有一些文本和其他元素决定了左侧框的位置。这可能会导致位置在不同的计算机上发生变化（使用不同的浏览器、字体、缩放等）。因此底部可能不会在另一个用户的计算机上排列

有没有人知道如何设置右边大盒子的高度，使两个盒子始终在底部对齐

注：涉及HTML、CSS或JavaScript的解决方案将不胜感激

编辑：

<div id="PopUp">

    <div id="LeftPanel">
        <p>Some Text</p>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
        <hr>
        <p>Some More Text</p>
        <div id="LeftBox">
        </div>
    </div>

    <div id="RightPanel">
        <p>Some Text</p>
        <div id="RightBox">
        </div>
    </div>

</div>

div#PopUp {
    width: 750px;
    height: 350px;
}
div#LeftPanel {
    float: left;
    width: 300px;
    margin-right: 8px;
}
div#RightPanel {
    float: left;
    width: 300px;
}
div#LeftBox {
    border: 1px solid silver;
    height: 150px;
}
div#RightBox {
    border: 1px solid silver;
    height: 150px;
}

补充说

HTML:

<div id="PopUp">

    <div id="LeftPanel">
        <p>Some Text</p>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
        <hr>
        <p>Some More Text</p>
        <div id="LeftBox">
        </div>
    </div>

    <div id="RightPanel">
        <p>Some Text</p>
        <div id="RightBox">
        </div>
    </div>

</div>

div#PopUp {
    width: 750px;
    height: 350px;
}
div#LeftPanel {
    float: left;
    width: 300px;
    margin-right: 8px;
}
div#RightPanel {
    float: left;
    width: 300px;
}
div#LeftBox {
    border: 1px solid silver;
    height: 150px;
}
div#RightBox {
    border: 1px solid silver;
    height: 150px;
}

---

flexbox

version

div#弹出窗口{
宽度：750px；
填充：1em；
高度：自动；
保证金：0自动；
边框：1px纯红；
显示器：flex；
证明内容：之间的空间；
}
div#左面板{
flex:0300px；
显示器：flex；
弯曲方向：立柱；
}
div#LeftBox{
边框：1px纯银；
弹性：1；
}
div#右面板{
flex:0300px；
显示器：flex；
弯曲方向：立柱；
}
div#RightBox{
边框：1px纯银；
弹性：1；
}

一些文本

选择1
选择2
选择3

更多的文字

Lorem ipsum dolor sit amet，奉献精英。圣奎斯奎姆·比泰·卡姆维尔，马克西姆·奎拉特，位于科德内克市西奎临时消费品实验室。康莫迪，努拉

一些文本

Lorem ipsum dolor sit amet，奉献精英。Eos impedit，Nescuint placeat，准别名repudiandae obcaecati disependedus maiores，dicto dicta，soluta volupatibus laboriosam deletit dolores eum！在建筑实践中使用的布朗迪提亚白云岩，用于解决圣路易斯岛的排斥体问题。减去多洛雷姆·埃文尼特·奎亚·埃尼·埃尼·埃尼·奎亚·埃尼·埃尼·埃尼·奎亚·埃尼·埃尼·埃尼·埃尼·埃尼·奎亚·埃尼·埃尼·埃尼·埃尼·埃。我想说的是，我的责任在我，我的责任在我，我的责任在我，我的责任在我，我的责任在我。连续性坐位误差、侧位误差、同侧最小静脉缺失时间。共和国，尼莫·马克西姆·康塞特图！胎膜发炎

试试这个：
一个简单的JavaScript解决方案：
1.在左侧，将Office和Destination放在父div元素中。
2.获取此新的左父div元素的高度。
3.将此高度设置为右侧文本框

divRight.style.height = divLeft.clientHeight + 'px';

四,。因为它们大小相同，所以底部应该对齐

示例JSFIDLE如下所示：

---

祝你好运。

@JonathanWood

flexbox

是一个CSS解决方案，但正如Paulie_D所指出的，它是IE10+@JonathanWood这些答案对你有用吗？请别忘了收一张。@JonathanWood抱歉，我不是故意要骚扰你的。谢谢，但这对我来说似乎很不一样。在您的示例中，有两个高度相同且在顶部对齐的div。我不确定这将如何应用于我发布的JSFIDLE。