JSFiddle - React, Tailwind, and code Playground

HTML

<table id="content">
    <tr>
        <th>Description 1</th>
        <td>Data 1A</td>
        <td>Data 1B</td>
        <td>Data 1C</td>
    </tr>
    <tr>
        <th>Description 2</th>
        <td>Data 2A</td>
        <td>Data 2B</td>
        <td>Data 2C</td>
    </tr>
    <tr>
        <th>Description 3</th>
        <td>Data</td>
        <td>More data</td>
        <td>And...<br/>more data</td>
    </tr>
</table>

CSS

@media only screen and (min-width: 769px) {
       #content {
    border:1px solid;
    border-collapse:collapse;
}
#content td, #content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
}
}
@media only screen and (max-width: 768px) {
#content {
    border:1px solid;
    border-collapse:collapse;
}
#content tr {
    height:4em; border-bottom:1px solid;
}
#content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
    height:4em;
}
#content td {
    padding:.07em .2em;
    white-space:nowrap;
    height:1.4em;
    display:inline;
}
#content td:not(:last-child)::after {
    display:block; content:'';
    height:0;
    border-bottom:1px solid;
}

}