DIV wrapped RUBY text

by tofutim

HTML

<p>
<div id='container' style = "float:left">
	<div class='pinyin'>tái</div>
	<div class='text'>台</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>
<div id='container'>
	<div class='pinyin'>tái bāo</div>
	<div class='text'>台胞</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>
<div id='container'>
	<div class='pinyin'>tái bāo</div>
	<div class='text'>台胞</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>
    <div id='container'>
	<div class='pinyin'>tái bāo</div>
	<div class='text'>台胞</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>
    <div id='container'>
	<div class='pinyin'>tái bāo</div>
	<div class='text'>台胞</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>
    <div id='container'>
	<div class='pinyin'>tái bāo</div>
	<div class='text'>台胞</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>
    <div id='container'>
	<div class='pinyin'>tái bāo</div>
	<div class='text'>台胞</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>
    <div id='container'>
	<div class='pinyin'>tái bāo</div>
	<div class='text'>台胞</div>
	<div class='rubydef'>longish text that I would like to have wrap</div>
</div>

CSS

#container {
	border: 1px solid #f00;
	margin: 0px;
	display:inline-block;
	display: table;
    float: left;
}
.text {
	margin: 0px;
	display: table-row;
	width:auto !important;
	font-size:36pt;
	line-height:115%;
	background: #ffcccc;
    white-space: nowrap; 
}
.pinyin {
	margin: 0px;
	display: table-cell;
	width: auto;
	text-align: center;
	background: #ccccff;
}
.rubydef {
	margin: 0px;
	display: table-cell;
	width: 1px;
	text-align: center;
	font-style: italic;
	background: #ccffcc;
}