CSS网格：行高等于行中最大的列

Question

我有一个带有文本区域，文本输入和按钮的网格。我想将每一行的内容居中，并使行的高度相同，因此我可以设置背景色。 HTML：

<div class="grid">
  <div>
    <textarea></textarea>
  </div>     
  <div>
     Time1:<input>
  </div>
  <div>Time2<input placeholder="hh:mm" type="time">
  </div>
  <div>
    <button>Change</button>
    <button>Change2</button>
  </div>
</div>

CSS：

.grid {
    display: grid;
    width: 90%;
    grid-template-columns: 0.6fr 0.6fr 0.6fr 0.2fr;
    grid-auto-rows: 1fr;
    align-items: center;
} 
.grid > div {
  background-color: blue;
}  
.grid .button {
    margin: 0.2rem 0rem;
}

CodePen：https://codepen.io/anon/pen/wYbLay

我想使蓝色背景与行中最高列的高度相同（我可以设置网格的背景色，但最终的网格具有多行，我想设置一个网格-行间距）。