Can't make <p> text aligned to top in grid layout

I've created a simple CSS grid layout of two columns and h2 elements are aligned properly at the top, but P elements are aligned vertically to the middle.

I've tried adding vertical-align: top and vertical-align: text-top, nothing changed.

#prosolcolumns {
  padding: 40px !important;
  display: grid !important;
  grid-gap: 40px !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  grid-template-rows: auto !important;
  background: #ffffff !important;
  max-width: 90% !important;
  min-width: 50% !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
  margin-left: auto !important;
  margin-right: auto !important;
}

#prosolcolumns>div,
#prosolcolumns>noindex>div {
  display: grid;
  vertical-align: top !important;
  width: auto !important;
  padding: 40px !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
}

#prosolcolumns p {
  padding: 0px 0px 0px 0px !important;
  margin-left: 0px !important;
  text-align: justify;
}

#prosolcolumns h2 {
  margin-left: 0px !important;
}

<div id="prosolcolumns">
  <div>
    <h2>Problem</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices. Phasellus in sollicitudin justo. Cras faucibus et diam quis facilisis. Nam ac lectus sem. Duis sit amet est nec felis malesuada semper quis pretium arcu. Sed laoreet mattis nisl, non
      tempor quam porttitor et. Nulla non ante sit amet ex blandit tincidunt nec sit amet lorem. Nam vitae lacus pretium, porta leo id, maximus enim. Vestibulum vehicula nunc vel enim euismod, ac convallis sem iaculis. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Phasellus sit amet sem sapien. Sed vel turpis eget nunc facilisis maximus fermentum vel tellus.
    </p>
  </div>
  <div>
    <h2>Solution</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices.
    </p>
  </div>
</div>

Solution

The row size would be auto by default - you can change this by using grid-template-rows or grid-auto-rows property. I am using grid-auto-rows: min-content in the demo below:

#prosolcolumns {
  padding: 40px !important;
  display: grid !important;
  grid-gap: 40px !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  grid-template-rows: auto !important;
  background: #ffffff !important;
  max-width: 90% !important;
  min-width: 50% !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
  margin-left: auto !important;
  margin-right: auto !important;
}

#prosolcolumns>div,
#prosolcolumns>noindex>div {
  display: grid;
  grid-auto-rows: min-content; /* added */
  vertical-align: top !important;
  width: auto !important;
  padding: 40px !important;
  box-sizing: border-box;
  /* не поддерживается в CSS2 */
}

#prosolcolumns p {
  padding: 0px 0px 0px 0px !important;
  margin-left: 0px !important;
  text-align: justify;
}

#prosolcolumns h2 {
  margin-left: 0px !important;
}

<div id="prosolcolumns">
  <div>
    <h2>Problem</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices. Phasellus in sollicitudin justo. Cras faucibus et diam quis facilisis. Nam ac lectus sem. Duis sit amet est nec felis malesuada semper quis pretium arcu. Sed laoreet mattis nisl, non
      tempor quam porttitor et. Nulla non ante sit amet ex blandit tincidunt nec sit amet lorem. Nam vitae lacus pretium, porta leo id, maximus enim. Vestibulum vehicula nunc vel enim euismod, ac convallis sem iaculis. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Phasellus sit amet sem sapien. Sed vel turpis eget nunc facilisis maximus fermentum vel tellus.
    </p>
  </div>
  <div>
    <h2>Solution</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat sodales quam, vitae auctor ligula consequat ut. Phasellus quis mollis lectus. Aenean aliquet enim in suscipit rutrum. Praesent quis pellentesque orci, vel auctor lorem. Sed tortor
      ligula, porttitor quis lorem vitae, vehicula consectetur metus. Phasellus accumsan lectus in turpis suscipit blandit. Aenean ornare, nulla id tempus semper, lectus augue lobortis nulla, aliquam gravida risus mauris at diam. Donec in maximus nisl.
      Nullam luctus metus ut lectus commodo, a tincidunt ex ultrices.


    </p>
  </div>
</div>

Please note that this is not a complete solution - because what you are trying to do is match grid items in adjacent grid containers and this would come under the preview of the new subgrid module. It'd have been easier to match the inner grids if subgrid module was supported in browsers (only in Firefox Nightly versions at the moment). See some of the discussions too if interested: