CSS Grid layout for a form - css

Question

I have a div named main-filter and within the div, I have two div. Now, I want to create a form with button, labels and input and I want to put two div inside the form and it should look like the below down screenshot. I have the HTML and CSS code but it is not working and couldn't figure out how to do it with CSS grid. I need to make it responsive as well!. I am totally new at CSS grid and any help would much be appreciated. Thank you.
.main-filter {
display: flex;
margin: 0px;
padding: 20px;
height: 90px;
background-color: #eff0f2;
color: #287993;
margin-bottom: 3rem;
}
.main-header__left {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
float: left;
margin-left: 250px;
margin-right: 200px;
}
.main-header__right {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
float: right;
}
.filter-button1 {
background: #38acd2;
color: #FFFFFF;
max-width: 380px;
min-width: 370px;
min-height: 35px;
font-weight: bold;
}
input,
button {
grid-column: 2 / 4;
width: auto;
margin: 0;
}
input {
width: 370px;
height: 30px;
border: 1px solid #38acd2;
}
<div className="main-filter">
<form onSubmit={this.addItem}>
<div className="main-header__left">
<label className="start-timestamp">Start Timestamp: </label>
<input type="text" ref={(input4)=> this.input4 = input4} className="input-item" id="addInput3" placeholder="Ex. 2019-1-12" />
<label className="source-ip-address">Source IP Address: </label>
<input type="text" name="source" ref={(input1)=> this.input1 = input1} className="input-item" id="addInput3" placeholder="127.0.0.1 " />
<label className="service">Service Name: </label>
<input type="text" name="service" ref={(input3)=> this.input3 = input3} className="input-item" id="addInput3" placeholder="Ex. Facebook or Whatsapp *" required />
</div>
<div className="main-header__right">
<label className="end-timestamp">End Timestamp: </label>
<input type="text" ref={(input5)=> this.input5 = input5} className="input-item" id="addInput3" placeholder="Ex. 2019-1-12" />
<label className="destinatin-ip-ddress">Destination IP Address:
</label>
<input type="text" name="destination" ref={(input2)=> this.input2 = input2} className="input-item" id="addInput3" placeholder="127.0.0.1 " />
<button type="submit" className="filter-button1">Apply
Filters</button>
</div>
</form>
</div>
css grid form Image screenshot,

Answer 1

Try using below code, I have modified HTML and CSS code, I hope this might help you to achieve expected result.
.main-filter {
/* margin: 0px; */
/* padding: 20px; */
height: 90px;
background-color: #eff0f2;
color: #287993;
}
form {
display: grid;
grid-template-columns: auto auto;
grid-gap: 15px;
}
.main-header__left>div,
.main-header__right>div {
display: flex;
}
.main-header__left>div>label,
.main-header__right>div>label {
width: 40%;
}
#media only screen and (max-width: 500px) {
/* .main-header__left {
grid-area: 2 / span 1;
grid-gap: 0;
} */
.main-header__right {
grid-area: 2 / span 1;
grid-gap: 0;
}
}
.filter-button1 {
background: #38acd2;
color: #FFFFFF;
min-height: 35px;
font-weight: bold;
border: none;
margin-top: 18px;
width: 100%;
}
input {
width: 100%;
height: 30px;
border: 1px solid #38acd2;
}
<div className="main-filter">
<form onSubmit={this.addItem}>
<div class="main-header__left">
<div>
<label class="start-timestamp">Start Timestamp: </label>
<input type="text" />
</div>
<div>
<label className="source-ip-address">Source IP Address: </label>
<input type="text" name="source" />
</div>
<div>
<label className="service">Service Name: </label>
<input type="text" name="service" />
</div>
</div>
<div class="main-header__right">
<div>
<label className="end-timestamp">End Timestamp: </label>
<input type="text" />
</div>
<div>
<label className="destinatin-ip-ddress">Destination IP Address:</label>
<input type="text" name="destination" />
</div>
<div>
<label></label>
<button type="submit" class="filter-button1">Apply Filters</button>
</div>
</div>
</form>
</div>