How can I make stackable table with CSS Grid?

Question

So here is the result that I want

Is it possible to achieve that without HTML table tag with pure CSS Grid?

So this is my layout.

 <div className="grid-Table">
  <div className="headings">
      <div>Name</div>
      <div>Price</div>
  </div>
  <div className="contents">
      <div>Name#1</div>
      <div>Price#1</div>
  </div>
</div>

And this is what I've tried so far with the styles.

 .grid-Table {  
  display: grid;
  background-color: #ffffff;
  font-size: 20px;
  grid-gap: 5px;
}

.grid-Table .headings, .contents{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-Table .contents {
  grid-row-start: 2;
}

@media screen and (max-width: 600px) {
  .grid-Table .headings div, .contents div {
    grid-column: 1 / -1;
  }
}

The PC version is fine, of course

But the mobile version is not