Grids and Dialog and Npc's and stuff...

Okay, so bare with me here

I am trying to write a story that involves quite some narration, NPC's and conversation's with such NPC's (with different options for the player to choose from and to influence the result).
Now, my idea was to have the narrated text in the middle of the passage, as the default text usually is, but have the dialog occur in a separate area of the passage. Sooo, like a small area at the foot of the passage (with a fixed size) where the dialog and the options were displayed. A lot like it's seen in RPG's and such... And then once the conversation is done, the narration continues on the central area of the passage.

Now I've been trying to do this with CSS and a grid, but I'm coming up short . Now, please note that I'm a total newbie at twine, and programming and CSS, and just... life.

This is the code I have on my stylesheet (don't mind the color choice, it's just an experiment, and the code itself is probably terrible):

.areas-wrapper{
display:grid;
grid-template-columns: 100%;
grid-template-rows:80% 20%;
grid-gap: 10px;
grid-template-areas:
"narration"
"dialog";
align-items:center
}
​
​
.areas-narration{
grid-area:narration;
background:blue;
padding:10px;
}
​
.areas-dialog{
grid-area:dialog;
background:red;
padding:10px;
}
​


My intention was for the dialog area to be always at the bottom of the page (like an actual footer, or even the same way the sidebar has a fixed position), but instead of just appending information, actual things could happen there.
It wouldn't bother me at all also, if, when there isn't dialog happening, if the bar was just there, as long as it remained at the bottom of the page.

Is this possible? Can anyone help me with my terrible coding?
I have some other questions too, slightly related, but I'd be sooo happy with just some help on this....

Thanks!

Oh, and I'm using Twine 2.0 and Sugarcube 2.18