How to prevent CSS table-cell content expanding to full height of row

Question

How do I keep an item (toggle styled checkbox in my case) from expanding to the full height of a table cell.

You can see my problem here: http://cdpn.io/scqev

When my styled checkbox is the tallest thing in the row it works fine, but when another cell expand from wraped text, the styled checkbox also expands instead of remaining the height set in the CSS.

I prefer to keep the table layout because I need my labels vertically aligned to the middle and I need the toggle switches all aligned to the right. If the expected output can be achieved with floats or something else that is fine.

Thanks for the help!

Answer 1

Just adding display: block; to it works fine for me.

Answer 2

Have you tried making a div inside that input? Making the div 64 px x 32 px?