Html 如何并排安装2个容器和输入框

我对前端非常陌生——HTML、CSS和bootstrap。我基本上想做一个比较页面，用户可以在其中输入搜索词，下表将显示从数据库中提取的信息。目前，当我试图将两个表和输入容器并排放置时，它们重叠并且彼此太近

所以我的问题是-什么是最好的方式来设计这些容器，使它们看起来像下面的线框

谢谢大家!

这就是我的页面现在的外观：

---

使用引导行和列方法 因为这也会让他们反应灵敏 范例

你的第一个盒子
你的第二个盒子

这将创建一行，其中两列的宽度为50%

HTML:

<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>

---

我在这里用引导

行
和
列
为您的案例做了一个简单的例子。希望对你有帮助

如果您想了解更多有关网格如何在引导中工作的信息：


.box{
边框：2倍纯色灰色；
宽度：300px；
高度：300px；
利润率：30像素；
边界半径：25px；
}
.输入字段{
利润率：30像素；
}

你好，世界！
我用bootstrap 5创建了一个示例

过滤器1
结果1
过滤器1
结果1
过滤器1
结果1
过滤器1
结果1
过滤器1
结果1
过滤器1
结果1
请举例说明您的页面现在的样子。我已经更新了问题-谢谢！请甚至提供您尝试过的代码。。。
<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>

.row {
    display: flex;
}

.column {
    flex: 50%;
}