title: Divs inside a grid item?
body: <p>I am using a Grid layout, and I am trying to place an image next to a text inside of the same griditem. The image is like an icon and supposed to be right next to the text (as it's placed in the code below). The text next to it is also supposed to have a different color and font than the rest of the text. I previously tried this with a span. However, when I use any of those tags inside the griditem it kinda breaks the grid. Instead of being a normal wall of text, it's suddenly all next to each other. I've been trying to figure this out for a couple hours now, can anyone help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    grid-template: repeat(4, auto) 300px 150px / repeat(6, 1fr);
    grid-gap: 3px;
    grid-template-areas: ". . h h . ." ". . img img . ." "a a a a a a" ". t t t t ." ". p1 p2 p3 p4 ." ". sm sm hp hp .";
  }
  
  .text {
    display: flex;
    grid-area: t;
    font-size: 1vw;
    font-family: Verdana;
    border: 1px solid #3f3f3f;
    border-radius: 25px;
    padding: 2%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="text"&gt;Hi!&lt;br&gt;&lt;br&gt; Just a quick note to say thank you for making an account with SuperBath.co.uk!
      &lt;br&gt;&lt;br&gt; Having a SuperBath.co.uk account will give you the following perks:&lt;br&gt;
      &lt;br&gt;
      &lt;img src="..scratches/Drop.jpg"&gt;Saved personal details&lt;br&gt; Personal data is instantly available as you log in with your email address and password. &lt;br&gt;&lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>