I was wandering if there was a way to make my little code idea look better by only changing the size of the hovered column so that the second one does not have some empty space at the bottom when hovering the first one?

Any ideas / solutions? thanks

```css
.Row {
  display: table;
  width: 95%;
  margin: auto;
  table-layout: fixed;
  border-spacing: 10px;
}

.appear_on_hover {
  display: none;
  transition-duration: .5s;
}

.Column:hover .appear_on_hover {
  display: block;
  transition-duration: .5s;
}

.Column {
  background: #ddd; 
  display: table-cell;
  text-align: center;
  transition-duration: .5s;
}

.Column:hover {
  transform: scale(1.2);
  transition-duration: .5s;
}
```

```html
<div class="Row">
  <div class="Column">
    <h4>
      <br>
      <b>col 1</b>
      <br> some text
      <div class="appear_on_hover">
        test l1 <br> test l2 <br> test l3
      </div>
    </h4>
  </div>

  <div class="Column">
    <h4>
      <br>
      <b>col 2</b>
      <br> some text
    </h4>
  </div>
</div>
```

don't take attention to the text, just some french stuff, I have this:
![img1](https://imgur.com/dmQeios.jpg)

and would like something like this:
![img2](https://imgur.com/zsEGozd.jpg)