表单的CSS网格布局

我有一个名为main filter的div，在这个div中，我有两个div。现在，我想创建一个带有按钮、标签和输入的表单，我想在表单中放置两个div，它应该看起来像下面的屏幕截图。我有HTML和CSS代码，但它不起作用，也不知道如何使用CSS网格。我也需要让它有响应性！。我是CSS网格的新手，任何帮助都将不胜感激。多谢各位

。主过滤器{
显示器：flex；
边际：0px；
填充：20px；
高度：90px；
背景色：#eff0f2；
颜色：#287993；
边缘底部：3rem；
}
.main-header___左{
显示：网格；
网格模板列：自动1fr；
网格间距：0.3em 0.6em；
网格自动流动：稠密；
对齐项目：居中；
浮动：左；
左边距：250像素；
右边距：200px；
}
.main-header__右{
显示：网格；
网格模板列：自动1fr；
网格间距：0.3em 0.6em；
网格自动流动：稠密；
对齐项目：居中；
浮动：对；
}
.过滤按钮1{
背景：#38acd2；
颜色：#FFFFFF；
最大宽度：380px；
最小宽度：370px；
最小高度：35px；
字体大小：粗体；
}
输入，
钮扣{
网格柱：2/4；
宽度：自动；
保证金：0；
}
输入{
宽度：370px；
高度：30px；
边框：1px实心#38acd2；
}

开始时间戳：
this.input4=input4}className=“输入项”id=“addInput3”占位符=“例如2019-1-12”/
源IP地址：
this.input1=input1}className=“输入项”id=“addInput3”占位符=“127.0.0.1”/
服务名称：
this.input3=input3}className=“输入项”id=“addInput3”placeholder=“例如Facebook或Whatsapp*”必填项/>
结束时间戳：
this.input5=input5}className=“输入项”id=“addInput3”占位符=“例如2019-1-12”/
目标IP地址：
this.input2=input2}className=“输入项”id=“addInput3”占位符=“127.0.0.1”/
申请
过滤器

尝试使用下面的代码，我已经修改了HTML和CSS代码，希望这能帮助您达到预期的效果

。主过滤器{
/*边际：0px*/
/*填充：20px*/
高度：90px；
背景色：#eff0f2；
颜色：#287993；
}
形式{
显示：网格；
网格模板列：自动；
栅极间隙：15px；
}
.main-header__左>div，
.main-header\uuu right>div{
显示器：flex；
}
.main-header\uuu left>div>label，
.main-header\uuu right>div>label{
宽度：40%；
}
@仅介质屏幕和（最大宽度：500px）{
/*.main-header___左{
网格面积：2/1跨；
网格间距：0；
} */
.main-header__右{
网格面积：2/1跨；
网格间距：0；
}
}
.过滤按钮1{
背景：#38acd2；
颜色：#FFFFFF；
最小高度：35px；
字体大小：粗体；
边界：无；
边缘顶部：18px；
宽度：100%；
}
输入{
宽度：100%；
高度：30px；
边框：1px实心#38acd2；
}

开始时间戳：
源IP地址：
服务名称：
结束时间戳：
目标IP地址：
应用过滤器