Label should fill entire table cell

HTML

<table>
    <tr>
        <td>Some column title</td>
        <td>Another column title title title</td>
    </tr>
    <tr>
        <td>Value 1
            <br>(a bit more info)
            <br>(a bit more info)
            <br>(a bit more info)
            <br>(a bit more info)</td>
        <td class="label-table-cell">
            <div class="label-wrapper">
                <label>
                    <input type="checkbox" />label intended to fill entire table cell</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>Value 1
            </td>
        <td class="label-table-cell">
            <div class="label-wrapper">
                <label>
                    <input type="checkbox" />label intended to fill entire table cell</label>
            </div>
        </td>
    </tr>
</table>

CSS

table td {
  vertical-align: middle;
}

td {
    border: 1px solid #000;
    height: 100%;
    position: relative;
    display: flex;
  flex-direction: column;
  height: 100%;
}
.label-table-cell {
    /*height: 1px;*/
}
.label-wrapper {
    height: 100%;
}
label {
  flex: 1;
    background-color: Fuchsia;
}
label:hover {
    background-color: red;
    color: white;
}

JavaScript

$(".label-table-cell").each(function () {
    var heightOfRow = $(this).height();
    $(this).children(".label-wrapper").height(heightOfRow);
});