title: CSS Grid layout for a form
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="main-filter"&gt;
  
    &lt;form onSubmit={this.addItem}&gt;
      &lt;div className="main-header__left"&gt;
        &lt;label className="start-timestamp"&gt;Start Timestamp: &lt;/label&gt;
  
        &lt;input type="text" ref={(input4)=&gt; this.input4 = input4} className="input-item" id="addInput3" placeholder="Ex. 2019-1-12" /&gt;
        &lt;label className="source-ip-address"&gt;Source IP Address: &lt;/label&gt;
        &lt;input type="text" name="source" ref={(input1)=&gt; this.input1 = input1} className="input-item" id="addInput3" placeholder="127.0.0.1 " /&gt;
  
        &lt;label className="service"&gt;Service Name: &lt;/label&gt;
        &lt;input type="text" name="service" ref={(input3)=&gt; this.input3 = input3} className="input-item" id="addInput3" placeholder="Ex. Facebook or Whatsapp *" required /&gt;
  
  
      &lt;/div&gt;
  
  
      &lt;div className="main-header__right"&gt;
        &lt;label className="end-timestamp"&gt;End Timestamp: &lt;/label&gt;
        &lt;input type="text" ref={(input5)=&gt; this.input5 = input5} className="input-item" id="addInput3" placeholder="Ex. 2019-1-12" /&gt;
  
        &lt;label className="destinatin-ip-ddress"&gt;Destination IP Address: 
        &lt;/label&gt;
        &lt;input type="text" name="destination" ref={(input2)=&gt; this.input2 = input2} className="input-item" id="addInput3" placeholder="127.0.0.1 " /&gt;
  
  
        &lt;button type="submit" className="filter-button1"&gt;Apply 
        Filters&lt;/button&gt;
  
  
      &lt;/div&gt;
  
  
    &lt;/form&gt;
  
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>css grid form Image screenshot,
  <img src="https://i.stack.imgur.com/tizio.png" alt="the img" /></p>