JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="table-header">
        <td class="table-cell">Game</td>
        <td class="table-cell">Yes</td>
        <td class="table-cell">No</td>
    </tr>
    <tr class="table-row">
        <td class="table-cell">FootBall</td>
        <td class="table-cell">
            <input type="radio" name="yes" />
        </td>
        <td class="table-cell">
            <input type="radio" name="yes" />
        </td>
    </tr>
    <tr class="table-row">
        <td class="table-cell">Hockey</td>
        <td class="table-cell">
            <input type="radio" name="yes" />
        </td>
        <td class="table-cell">
            <input type="radio" name="yes" />
        </td>
    </tr>
    <tr class="table-row">
        <td class="table-cell">Other</td>
        <td class="table-cell">
            <input type="text" class='table-cell-text' name="yes" />
        </td>
    </tr>
</table>

CSS

.table-header {
    background-color:green;
}
.table-cell {
    width:100px;
    height:20px;
}

JavaScript

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
        $(this).closest('tr').replaceWith('<tr class="table-row"><td class="table-cell">' + this.value + '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td></tr>');
    }
});