Javascript 如何将输入字段分为两列？

我有一个表格，目前是在一列所有，我想它被分为2列

我已经尝试添加div类，但是表单仍然只有一列，我不想对当前表单本身做任何更改。我只想把它分成两列

我也不希望更改字段上的当前CSS效果

$yellow:#f5ba1a；
$black:000000；
$grey:#中交;；
.form-style-1{
字体系列：Verdana，日内瓦，无衬线；
字号：0.em；
宽度：40em；
填充：1em；
边框：1px实心#cbc9c9；
溢出：自动；
调整大小：两者；
}
.form-style-1字段集{
边界半径：无；
背景色：#ebebebeb；
填充物：5px；
边框：1px实心#cbc9c9；
宽度：450px；
保证金：自动；
盒影：1px2p5pRGBA（0,0,0,31）；
-webkit盒阴影：1px2p5pRGBA（0,0,0,31）；
-莫兹盒阴影：1px2p5pRGBA（0,0,0,31）；
}
.form__字段{
显示：块；
}
[类*=“--复选框”]{
显示：内联块；
}
[数据条件]{
显示：无；
}
#航班：选中~[数据条件*=“航班”]{
显示：块；
}
#酒店：选中~[数据条件*=“酒店”]{
显示：块；
}
#传输：选中~[数据条件*=“传输”]{
显示：块；
}
输入[type=“text”]
{
显示：块；
宽度：50%；
填充：8px 10px 9px 35px；
高度：25px；
框大小：边框框；
大纲：无；
-webkit过渡：所有0.30秒都易于输入输出；
-moz转换：所有0.30秒的易入易出；
-ms转换：所有0.30秒均易于输入输出；
过渡：所有0.30秒的缓进缓出；
背景色：#fff；
-网络工具包盒阴影：1px2p5pRGBA（0,0,0,09）；
-莫兹盒阴影：1px2p5pRGBA（0,0,0,09）；
盒影：1px2p5pRGBA（0,0,0,09）；
边框：实心1px#cbc9c9；
-webkit边界半径：0px 4px 0px/5px 5px 4px 4px；
-moz边界半径：0px 4px 4px 0px/0px 0px 4px 4px；
边界半径：0px 4px 0px/5px 5px 4px 4px；
}
输入[type=“date”]
{
显示：块；
宽度：50%；
填充：8px 10px 9px 35px；
高度：25px；
框大小：边框框；
大纲：无；
-webkit过渡：所有0.30秒都易于输入输出；
-moz转换：所有0.30秒的易入易出；
-ms转换：所有0.30秒均易于输入输出；
过渡：所有0.30秒的缓进缓出；
背景色：#fff；
-网络工具包盒阴影：1px2p5pRGBA（0,0,0,09）；
-莫兹盒阴影：1px2p5pRGBA（0,0,0,09）；
盒影：1px2p5pRGBA（0,0,0,09）；
边框：实心1px#cbc9c9；
-webkit边界半径：0px 4px 0px/5px 5px 4px 4px；
-moz边界半径：0px 4px 4px 0px/0px 0px 4px 4px；
边界半径：0px 4px 0px/5px 5px 4px 4px；
}
文本区{
显示：块；
宽度：50%；
填充：8px 10px 9px 35px；
高度：25px；
框大小：边框框；
大纲：无；
-webkit过渡：所有0.30秒都易于输入输出；
-moz转换：所有0.30秒的易入易出；
-ms转换：所有0.30秒均易于输入输出；
过渡：所有0.30秒的缓进缓出；
背景色：#fff；
-网络工具包盒阴影：1px2p5pRGBA（0,0,0,09）；
-莫兹盒阴影：1px2p5pRGBA（0,0,0,09）；
盒影：1px2p5pRGBA（0,0,0,09）；
边框：实心1px#cbc9c9；
-webkit边界半径：0px 4px 0px/5px 5px 4px 4px；
-moz边界半径：0px 4px 4px 0px/0px 0px 4px 4px；
边界半径：0px 4px 0px/5px 5px 4px 4px；
}
挑选{
显示：块；
宽度：50%；
填充：8px 10px 9px 35px；
高度：35px；
框大小：边框框；
大纲：无；
-webkit过渡：所有0.30秒都易于输入输出；
-moz转换：所有0.30秒的易入易出；
-ms转换：所有0.30秒均易于输入输出；
过渡：所有0.30秒的缓进缓出；
背景色：#fff；
-网络工具包盒阴影：1px2p5pRGBA（0,0,0,09）；
-莫兹盒阴影：1px2p5pRGBA（0,0,0,09）；
盒影：1px2p5pRGBA（0,0,0,09）；
边框：实心1px#cbc9c9；
-webkit边界半径：0px 4px 0px/5px 5px 4px 4px；
-moz边界半径：0px 4px 4px 0px/0px 0px 4px 4px；
边界半径：0px 4px 0px/5px 5px 4px 4px；
}
输入[type=“time”]
{
显示：块；
宽度：50%；
填充：8px 10px 9px 35px；
高度：25px；
框大小：边框框；
大纲：无；
-webkit过渡：所有0.30秒都易于输入输出；
-moz转换：所有0.30秒的易入易出；
-ms转换：所有0.30秒均易于输入输出；
过渡：所有0.30秒的缓进缓出；
背景色：#fff；
-网络工具包盒阴影：1px2p5pRGBA（0,0,0,09）；
-莫兹盒阴影：1px2p5pRGBA（0,0,0,09）；
盒影：1px2p5pRGBA（0,0,0,09）；
边框：实心1px#cbc9c9；
-webkit边界半径：0px 4px 0px/5px 5px 4px 4px；
-moz边界半径：0px 4px 4px 0px/0px 0px 4px 4px；
边界半径：0px 4px 0px/5px 5px 4px 4px；
}
h1{
字体大小：32px；
字体大小：300；
颜色：#4c；
文本对齐：居中；
填充顶部：10px；
边缘底部：10px；
}
a、 钮扣{
字体大小：14px；
字号：600；
颜色：白色；
填充：6px25px0px20px；
利润率：10px 8px 20px 0px；
显示：内联块；
浮动：对；
文字装饰：无；
宽度：50px；高度：27px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
背景色：#3a57af；
-网络工具包盒阴影：0 3pxRGBA（58,87175,75）；
-莫兹盒阴影：0 3pxRGBA（58,87175,75）；
盒影：0 3pxRGBA（58,87175,75）；
过渡：所有0.1s线性0；
顶部：0px；
位置：相对位置；
}
a、 按钮：悬停{
顶部：3px；
背景色：#2e458b；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
}
p{
颜色：黑色；
}

旅行登记表
选择旅行
航班
酒店
转移

旅行社
   <div class="form-input">
        <label class="form__field form__field--text" data-conditional="flight hotel travel" for="name">
            <span class="form__label">Traveler Name</span>
            <input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> 
        </label>
    </div>

.form-input {
   display: inline-block;
}