CSS not changing the form input box

Question

I have the following HTML code:

.search{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#searchForm{
  grid-template-columns: span 2; 
}
#labelFilter{
  grid-template-columns: 1/2;
}
#inputBox{
  grid-template-columns: 2/-1;
}

<div class="search">
    <form id="searchForm">
        <label id="labelFilter"> Filter shown with: </label>
        <input id="inputBox" value="">
    </form>
</div>

I want the final thing to look like this: (The lines are grid lines are shown for the purpose of demonstration):

The search bar is not moving to the next half of the screen. How can I fix it?

Also, Chrome displays the grid-template-column property of the form , label and input as invalid property value. why?

Thanks

Answer 1

try to make it this way.

Snippet:

#searchForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#labelFilter{
  text-align: center;
}

<div class="search">
  <form id="searchForm">
    <label id="labelFilter"> Filter shown with: </label>
    <input id="inputBox" value="">
  </form>
</div>

I hope this will works for you.

Thank you...