Aligning items next to each other in a grid

Question

I'm trying to use something like a grid in a grid, I'd like to ask how to make the "orange" main element next to the "blue" aside element. I can ask how to fix it so that the elements are not below each other, but next to each other.

body {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

header {
  grid-area: header;
  background-color: #111af5;
}

aside {
  grid-area: sidebar;
  background-color: #3faaf5;
}

article {
  grid-area: content;
  background-color: #bada55;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "main article-aside";
}

footer {
  grid-area: footer;
  background-color: #ccc333;
}

main {
  grid-area: "main";
  background-color: orange;
}

article aside {
  grid-area: "article-aside";
}

<header>Header</header>
<aside>Lorem
</aside>
<article>
  <main>Lorem</main>
  <aside>Lorem</aside>
</article>
<footer>Footer</footer>

Answer 1

Remove the quotes around article-aside

article aside{
    grid-area: article-aside;
}

"article-aside" is an invalid value.