title: How to prevent shrinking text pushing margins upwards (which would affect the placement of the heading)?
body: <p>Here is my code:</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>.starting-info {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      justify-self: center;
      text-align: center;
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="starting-info"&gt;
      &lt;div class="section-info one"&gt;
          &lt;img src="one.svg"&gt;
          &lt;h3&gt;H1&lt;/h3&gt;
          &lt;p&gt;Example1 Example1 Example1&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="section-info two"&gt;
          &lt;img src="two.svg"&gt;
          &lt;h3&gt;H2&lt;/h3&gt;
          &lt;p&gt;Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2 Example2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="section-info three"&gt;
          &lt;img src="three.svg"&gt;
          &lt;h3&gt;H3&lt;/h3&gt;
          &lt;p&gt;Example3 Example3 Example3 Example3 Example3 Example3&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="section-info four"&gt;
          &lt;img src="four.svg"&gt;
          &lt;h3&gt;H4&lt;/h3&gt;
          &lt;p&gt;Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4 Example4&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've resorted to handling a 2 grid layout before by using media queries and margin adjustments (very lazy I know) but I'm trying out a 4 grid layout here.</p>
  <p>Essentially, I am imagining the image and header should stay in place at all times and the text would just extend downwards rather than push the other elements upwards.</p>
  <p>Thank you!</p>