JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<table style="width:100%; table-layout: fixed">

  <tbody>
    <tr>
      <td>TEST</td>
      <td>TEST </td>
      <td>TEST</td>
      <td> TEST</td>
    </tr>
    <tr id="test">
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <tr>
        <td>E</td>
        <td>F </td>
        <td>G</td>
        <td>H </td>
      </tr>
      <tr id="test">
        <td>I</td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
      </tr>
      <tr>
        <td>TEST</td>
        <td>TEST </td>
        <td>TEST</td>
        <td>TEST </td>
      </tr>
      <tr id="test">
        <td>O</td>
        <td>P</td>
        <td>Q</td>
        <td>R</td>
      </tr>

CSS

table,
tr,
td {
  border: 1px solid black;
}

#test {
  height: 0;
  transition: all .2s ease-in-out;
}

tr:hover + #test {
  height: auto;
}