html怎么让两个表单并行,HMLT/CSS:如何将一个表单分成两个部分,使其并排显示?

我正在为我的项目准备一个酒店预订页面,但是我很难把表格弄好。我有许多输入字段,我当前的代码只是使它成为一个非常长的页面。我的预订单基本上有两部分:客户信息和房间偏好。我想把左边的客户信息和右边的房间偏好对齐。因为我计划验证表单,所以我希望它是相同的

My form currently:

[ [ Customer Info ]

[ Preferen Info ] ]

How I want it to be:

[ [ Customer Info ] [ Preferen Info ] ]

我试着把表格分成两个表格,然后把它们放在一起,但是我想知道有没有更好的方法。。。以下是我当前的代码:

#mainContainer {

width: 1139px;

display: flex;

justify-content: center;

padding: 0;

margin: auto;

text-align: center;

}

#formContainer {

max-width: 500px;

width: 100%;

height: 100%;

margin-top: 150px;

background-color: white;

}

#contact input {

width: 80%;

border: 1px solid #ccc;

background: #FFF;

margin: 0 0 5px;

padding: 10px;

}

#contact button[type="submit"] {

width: 50%;

border: none;

margin: 0 0 55px;

padding: 10px;

font-size: 15px;

}

Submit