Hover on a table's row and open a row below the row for more details

I have the following table:

DEMO:

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th width="150px">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td div class='action'>flight leaves on 13:20<BR>Take the train from ABC</td> 
      <td>JFK</td> 
      <td>234</td>      
    </tr>
    <tr>
      <td>LAX</td>
      <td>104</td>
    </tr>
  </tbody>
</table>

and css

.action {
  display: none;
}

tr:hover .action {
  display: block;
}

Current result shows that when the user hover over the airport name the text appears inline:

My objective: when user hover over the airport name, he will see detail information in a line BELOW the airport and it should take the entire space. Example, hover over JFK you will get:

Airport    Value
JFK        234

flight leaves on 13:20
Take the train from ABC

LAX        104

I was hoping that the display: block will do the trick but it comes to the left.

When you use display: none/block the layout of the table will change, because when the element is not displayed, there is no space allocated for it between the other tags. You can use visibility: collapse instead. From the MDN docs

The collapse keyword has different effects for different elements:

For <table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.

Notice the <td colspan="2"> so that the single td in the row spans over both columns

tr.action {
visibility: collapse;
}
tr:hover + tr.action {
visibility: visible;
}

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th width="150px">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JFK</td> 
      <td>234</td>      
    </tr>
    <tr class="action">
      <td colspan="2">flight leaves on 13:20 Take the train from ABC</td>
    </tr>
    <tr>
      <td>LAX</td>
      <td>104</td>
    </tr>
  </tbody>
</table>

The switch between visibility: collapse/visible will happen instantly and can not be animated since there are no steps in between. If the row should show up more smoothly on hover, an alternative way would be to use line-height: 0/1 and overflow: hidden instead

table {
  line-height: 1.2;
  border-collapse: collapse;
}
tr.action td {
  line-height: 0;
  overflow: hidden;
  padding-block: 0;
  transition: all 300ms;
}
tr:hover + tr.action td {
  padding-block: 1;
  line-height: 1.2; /*same as table line-height*/
}

<table>
    <tr>
      <td>hover me!</td>
    </tr>
    <tr class="action">
      <td>I'm showing up more smoothly</td>
    </tr>
    <tr>
      <td>next row</td>
    </tr>
  </table>