在div中垂直对齐未知高度的浮动div

Question

我一直在尝试通过“行” div适应基本的响应式布局（在w3schools中），其中包含各种“元素” div，这些div可以并排显示，也可以在媒体上方一个显示。但是，我的div包含可变数量的文本，并且它们以最高对齐方式显示。我阅读了我在StackOverflow和其他地方可以找到的所有内容，但无法弄清楚如何进行最少的更改（对设计的其余部分影响最小）并使它们垂直对齐在中间或底部。

下面是一个示例起点，从this示例中删​​除了所有不必要的内容。可以在不更改所有内容的情况下将三个矩形居中对齐还是底部对齐？

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
  <div class="column" style="background-color:#aaa;">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</div>
  <div class="column" style="background-color:#bbb;">Column</div>
  <div class="column" style="background-color:#ccc;">The quick brown fox jumps over the lazy dog </div>
</div>

我几乎是个新手，但是我读到的任何东西似乎都与上述布局策略不兼容，并且在视觉外观，响应性等方面都有很多副作用。