How to align text at the top and left in a quarto div container?

Question

I'm trying to create a Quarto pdf document with a grid layout of three rows and two columns. In the top left div container, I want to have text (a list of bullet points) and in the other five containers I want to have charts or tables.

Getting the grid layout to work wasn't a problem, but trying to get the text in the upper left div container to be aligned at the top rather than centered vertically has proved to be more difficult than it seems it should be.

Here's a minimum reproducible example of the Quarto code that I'm using:

---
format: 
  pdf:
    pdf-engine: xelatex
    documentclass: article
    geometry:
      - left=1cm
      - right=1cm
      - top=2cm
      - bottom=1cm
    mainfont: Open Sans
    include-in-header: 
      text: |
        \usepackage{fancyhdr}
        \pagestyle{fancy}
        \usepackage{tikz}
        \usepackage{lipsum}
        \usepackage{etoolbox}
        \patchcmd{\chapter}{\thispagestyle{plain}}{\thispagestyle{fancy}}{}{}
        
        \definecolor{gmitblue}{RGB}{0,32,96}
        
        \usetikzlibrary{calc}
        \renewcommand{\headrulewidth}{0pt}
        
        \fancyhf{}
        \fancyhead[C]{%
        \begin{tikzpicture}[overlay, remember picture]%
            \fill[gmitblue] (current page.north west) rectangle ($(current page.north east)+(0,-0.75in)$);
            \node[anchor=north west, text=white, font=\Large\scshape, minimum size=0.75in, inner xsep=5mm] at (current page.north west) {Report title};
            \node[anchor=north east, minimum size=0.75in, inner xsep=5mm] at (current page.north east) {\includegraphics[height=0.8cm,keepaspectratio]{generic_logo.png}};
        \end{tikzpicture}
        }
        
        \setlength{\headheight}{12pt}
---

::: {layout-nrow="3"}

<div style='vertical-align: top; text-align: left;'>
## Executive Summary
 * Bullet 1
 * Bullet 2
 * Bullet 3
 * Bullet 4
 * Bullet 5
</div>

![](some_plot.png){width="3.33in"}

![](some_plot.png){width="3.33in"}

![](some_plot.png){width="3.33in"}

![](some_plot.png){width="3.33in"}

![](some_plot.png){width="3.33in"}
:::

And attached is what the output looks like. As one can see the text in the upper left hand container appears to be centered vertically, rather than starting at the top. I've also attached the placeholder chart and logo, in case someone wants to try to recreate the situation.