JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<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

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

</style>