How does Flip work with vertical aligned <td>?

[jmzbond]

I'm trying to flip some tiles of text, but the tiles should all be vertically centered. Prior to flip, the tiles were all arranged as <td>. When I apply flip, I notice 2 issues as seen in the fiddle and summarized below: https://jsfiddle.net/3c1f9vcb/2/

2 issues:

1. Flip seems to destroy the vertical-align:middle that's naturally a benefit from using <td>. Is there a way to get this back WITHOUT manually knowing the height of the content and doing something like equal margins or padding on child/parent? Just because I have varying content, and the whole point of using <td> to align is that I don't have to know all the heights. But alas, if this is the only way of doing it, so be it, I can at least solve this myself
2. The second issue I don't know how to solve at all, which is that when I add the flip it adds a huge space before the content starts (weird padding/margin/ something??)

Insights greatly appreciated!