```css
.d1 {
  display: flex;
}

.d2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d3 {
  background-color: lightblue;
  margin: 5px;
}
```

```html
<div class="d1">
  <div class="d2">
    <div class="d3">Test1</div>
    <div class="d3">Test2</div>
  </div>
  <div class="d2">
    <div class="d3">Test3</div>
    <div class="d3">Test4<br>Test4</div>
  </div>
</div>
```

In the above code, I have two columns of the same width and 2 `div`s in each one. But the 4th `div`, where `Test4<br>Test4` is written, is as a result higher than the others. How can I make the 2nd `div`'s height to always match the 4th? Ty

[![enter image description here](https://i.stack.imgur.com/BYSqb.png)](https://i.stack.imgur.com/BYSqb.png)