我添加了align-items: center，以便使Link 2垂直居中，因为描述很长。但是这样做破坏了网格边界。如何修复这个问题？提前感谢您。完整代码如下：

table {
      border: 1px solid #000;
      border-collapse: collapse;
    }
    
    
    a {
      color: red;
    }
    
    .tableRow {
      position: relative;
      display: grid;
      text-decoration: none;
      color: inherit;
      grid-template-columns: repeat(2, 1fr);
/*    place-items: center; */
      border: 1px solid #000;
      border-bottom: none;
      align-items: center;
    }
    .tableRow:hover, .tableRow:focus {
      background: #eee;
      outline: none;
    }
    .tableRow:last-child {
      border-bottom: 1px solid #000;
    }
    .tableRow a:not(.tableRowLink) {
      position: relative;
      z-index: 1;
    }
    
    .tableCell {
      padding: 18px;
      border-right: 1px solid #000;
    }
    .tableCell:last-of-type {
      border-right: none;
    }
    
    .tableRowLink {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

<div class="table">
  <div class="tableRow">
    <div class="tableCell"><a href="https://www.apple.com/" target="_blank"><p>Link 1</p></a></div>
    <div class="tableCell"><p>Short Description</p></div>
    <a class="tableRowLink" href="https://www.apple.com/" target="_blank"></a>
  </div>
  <div class="tableRow">
      <div class="tableCell"><a href="https://www.google.com/" target="_blank"><p>Link 2</p></a></div>
      <div class="tableCell"><p>Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description Very Long Description</p></div>
      <a class="tableRowLink" href="https://www.google.com/" target="_blank"></a>
    </div>
</div>