I want to put a radio button (or any other element) on the left of my tables, but have the button be vertically centered. If I new that the tables were all going to be the same size I could use relative positioning. However, I do not know this. This jsfiddle is close to what I need, however, the left div needs be be of the same height (for vertical alignment) and it also needs to reside in the margin. This jsfiddle is closer to what I am looking for, but seems a little hacky and doesn't allow for tables of different heights. Can I accomplish this using HTML/CSS without javascript?Here's the HTML I'm looking at using to accomplish this:\[code\]<div class="item"> <div class="one"><input type="radio" name="group"/></div> <div class="two"> <table> <tr><td>Data</td><td>More Data</td></tr> <tr><td>another</td><td>row</td></tr> <tr><td>of ...</td><td>you guessed it</td></tr> <tr><td>just</td><td>more data</td></tr> </table> </div></div>\[/code\]and CSS:\[code\]table {border-collapse:collapse;width:100%;}td {border:1px solid black;padding:10px;}.item {margin:10px; padding:10px; background:red;}.two {background:blue;}/* customization */.one {background:yellow;text-align:center;width:20px;display:table-cell;vertical-align:middle;}.two {margin-left:20px;}/* hacky */.one {height:50px;position:relative;top:55px;}.two {margin-top:-50px;}\[/code\]