The marginals used this way are a perfect example of what should be defined using "definition list" constructs i.e. using <dl>, <dt> and <dd>.
I edited your html to replace each <div> block with a <dt> (definition term) block and <p> block with a <dd> (definition definition) block. I then wrapped the entire "list" in a <dl> block and added the following CSS (note the grey background for the marginals):

Code:
dt { font-size: 1em; float: left; width: 8em; text-align: right; font-style:italic; background-color: #ddd;}
dd { margin: 0 0 1em 9em;}
To me, the resulting .html (attached below with a .txt suffix!) and .epub are a near perfect match to your code!!!
I have used this "definition list" construct before, namely in a conversion of my Webster's Dictionary 1913 in anticipation of having an official dictionary syntax incorporated into EPUB3 using this very same syntax. However, it seems my anticipation was premature...
How well does this appear in your epub reader?