I have an application where I want to display some foreign text with translations above most of the words. So it is text mixed with inline blocks two lines high, aligned at the bottom. Using either [table] or [div] set to inline-block encounters the same problem: the first inline block always starts on a new line, but subsequent ones are inline. Is there some way to fix it so ALL the inline blocks are inline?
.test {display:inline-block;vertical-align:bottom;border-collapse: collapse;}
td {padding:0px;}
.div-test {display:inline-block;position:relative;vertical-align:bottom;}
.top {top: -1.2em;left:0;float:left;}
p {line-height:2.5em;}<p>Translation goes here: <table class="test"><tr><td>Hi there</td></tr><tr><td>I'm a test</td></tr></table> and the rest is here. And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table> And here is another block: <table class="test"><tr><td>Oh dear</td></tr><tr><td>Did this work?</td></tr></table></p>
<p>Translation goes here: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> and the rest is here. And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div> And here is another block: <div class="div-test"><div class="bot">Oh dear</div><div class="top">Did this work?</div></div></p>