css grid align-items bug??

minimal_hack.html

  <div class='a-post-card-hack'>
    <div class='cn-body'>I'm pretending to be a content note</div>
    <div class='post-inner'>I'm pretending to be a post</div>
  </div>

minimal_hack.scss

.a-post-card-hack {
  display: grid;
  
  .cn-body {
    grid-column: 1; /* it can be just 1 or it can be 1/2, or it can be 1/-1 */
    grid-row: 1/2;    /* it appears not to matter as long as the divs are on top of one another */

    display: grid; /* this way buggy */
    display: flex; /* this way works */
    align-items: center;

    padding-top: 1.99rem; /* this div needs LESS TOTAL HEIGHT to break the vertical alignment */
    padding-bottom: 2rem;
  }

  .post-inner {
    grid-column: 1/-1;
    grid-row: 1 ;

    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}