title: HTML/CSS grid layout text elements position
body: <p>I got a codepen I've been working on but cant seem to get the quote to correctly position one below the other.
  As you can see here the author gets placed to the side in the same grid cell.
  <a href="https://codepen.io/AngelCasas/pen/qXdGbd?editors=1100" rel="nofollow noreferrer">https://codepen.io/AngelCasas/pen/qXdGbd?editors=1100</a>
  html5:</p>
  
  <pre><code>    &lt;blockquote class="phrase"&gt;
        &lt;p style="font-size: 3vh"&gt;"The monotony and solitude of a quiet life&lt;br&gt; stimulates the creative mind"&lt;/p&gt;
        &lt;p&gt;- Albert Einstein -&lt;/p&gt;
      &lt;/blockquote&gt;&lt;!-- End of quote --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .phrase {
        grid-area: phrase;
        display: flex;
        justify-content: center;
        text-align: center;
        font-family: Cardo, serif, Arial;
        font-size: 1.5vh;
        color: #00264d;
        }
  </code></pre>
  
  <p>Is there any way I can get the text to flow down instead of sideways?
  Thanks in advance for any advice!</p>