CSS/html为什么我的内联div处于不同的高度？（新手）

我在html页面上使用网格容器；在网格中两个相邻的div中，我有一些小div。我希望这些小div显示在相同的高度，以便它们在整个页面上对齐。我想我给了它们相同的相关属性，但它们的高度略有不同，行距也不同。有人能告诉我为什么会发生这种情况，以及如何补救吗。非常感谢。

我在看我的Chrome，我的信息非常相关。

我的高低不平的积木图像：高低不平的div图像

相关代码：容器在CSS中定义如下：

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 4fr 1fr;
  height: 400px;
  background-color: lightgreen;
}

出现问题的容器的两列是第3列和第4列（2fr和4fr列）。这些div的定义如下：

 .wordDisplay {
  padding-top: 100px;
  text-align: center;
}

.display {
  padding-top: 100px;
}

我想在同一高度出现的蓝色小盒子div是：

.a {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.a:hover {
  background-color: yellow !important;
}

.b {
  display: inline-block;
  width: 150px;
  height: 50px;
  padding-top: 20px;
  margin: 1%;
  border: 1px solid blue;
  background-color: lightgreen;
  font-size: 20px;
  text-align: center;
}

.b:hover {
  background-color: yellow;
}