Is there a way to adjust the cell sizes in a row so that all characters fit and have equal heights? Currently, the row looks like this: https://i.sstatic.net/A7o4Z.png Notice how the Japanese column has small characters that don't fully fit in the cell. Also, the English column cell is shorter than its neighbor.
I'd like the row to appear as follows: https://i.sstatic.net/7cRRD.png
The background resembles a long, green rectangle.
Below is the CSS and HTML code I'm using:
<style type='text/css'>
/* For small screen */
.row :nth-child(even){
background-color: #FFFFFF;
}
.row :nth-child(odd){
background-color: #D0E9C6;
}
/* For medium screen */
@media (min-width: 768px) {
.row :nth-child(4n), .row :nth-child(4n-1) {
background-color: #FFFFFF;
}
.row :nth-child(4n-2), .row :nth-child(4n-3) {
background-color: #D0E9C6;
}
}
/* For large screen */
@media (min-width: 992px) {
.row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {
background-color: #FFFFFF;
}
.row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {
background-color: #D0E9C6;
}
}
.header, h1 { background-color: #FFFFFF !important}
.en-buffer { margin-top: 10px; margin-right: 10px }
.jp-buffer { margin-top: 10px; margin-left: 10px }
</style>
</head>
<body>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 header jp-buffer"><h1>Japanese</h1></div><div class="col-md-4 col-sm-6 col-xs-12 header en-buffer"><h1>English</h1></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 japanese jp-buffer"><ruby lang="jp">カレー</ruby><ruby lang="jp">粉<rp>(</rp><rt>こ</rt><rp>)</rp>は</ruby><ruby lang="jp">家<rp>(</rp><rt>いえ</rt><rp>)</rp>にあるの?</ruby></div><div class="col-md-4 col-sm-6 col-xs-12 english en-buffer">Do you have curry powder at your house?</div>
</div>