JSFiddle - React, Tailwind, and code Playground

HTML

<table class='data_table'>
    <tbody>
        <tr>
            <td>
                <a href='javascript:void(0)' onclick='P_Expand(9)'>Drop me down!</a>
            </td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td colspan='3' style='background-color: #eee'>
                <div id='p_9' class='hidden_data'>
                    <p style="margin: 0px;">Donec dolor urna, vehicula in elementum eget, auctor dignissim nibh. Morbi et augue et nisi.</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>Line number 2...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

CSS

.data_table {
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}
 
.data_table tbody th {
    border-bottom: 1px solid #555;
    text-align: left;
}
 
.data_table tbody tr td a {
    color: #8b9cb0;
    text-decoration: none;
}

.hidden_data {
    display: none;
    padding: 10px;
    font-style: italic;
    color: #777;
}

JavaScript

function P_Expand(item_id)
{
    $('#p_' + item_id).slideToggle();
}