Can you set the details element to display grid?

Question

I wanted to create a filter element that can be collapsed using the <details> element as it comes out of the box with an open/close functionality.

However when it came to styling the fields inside, I wanted to use grid and it seems like <details> can't be set to display: grid?

Has anyone come across this behavior?

Your input is much appreciated!

details {
  display: grid;
  grid-template-columns: 100px 100px;
}

input {
  width: 100%;
}

label {
  display: block;
}

label:first-of-type {
  color: red;
  grid-column: 1;
}

label:last-of-type {
  color: blue;
  grid-column: 2;
}

<form>
  <details open>
    <summary>Filter</summary>
    <label>
        I should be on the left
        <input type="text">
      </label>
    <label>
        I should be on the right
        <input type="text">
      </label>
  </details>
</form>

Codepen here!

Answer 1

Have had to wrap the form input's within the details in a <div> or another container to get display: grid to work and style them.