tableのrowspanが2以上の時safari, iPhoneで表示が崩れる

前提

Chromeでは発生しない
Safari, iPhoneで再現する

実現したいこと

https://codepen.io/Ireen/pen/yLEGxbG
こちらにHTML、CSSのコードを記載しました。
これをSafari, iPhoneで開くと以下のような状態になります。

理想はChromeで開いた次のような感じになることです。

同じようなtableが複数のページにいくつもあるため、固定で列の高さを指定する方法は除外で、
「りんご」の部分の文章の高さが可変のため、CSSで解決したく、いいアイデアはないものか困っております。

コード

HTML
1<table>
2    <tbody><tr>
3        <th rowspan="2">
4            りんご<br>
5            りんご<br>
6            りんご<br>
7            りんご<br>
8            りんご<br>
9            りんご<br>
10        </th>
11        <td class="one">バナナ</td>
12        <td class="two">みかん</td>
13        </tr>
14        <tr>
15            <td class="three">パイン</td>
16            <td class="two">オレンジ</td>
17        </tr>
18    </tbody>
19</table>

CSS
1th, td{
2  border: 1px solid #000;
3}
4
5.one{
6    line-height: 80%;
7    font-size: 1.2rem;
8    padding: 20px 0;
9    width: 25%;
10    background: #f31e60;
11    color: white;
12    font-weight: bold;
13    text-align: center;
14}
15
16.two{   
17    width: 25%;
18    font-weight: bold;
19    color: #000;
20    text-align: center;
21    font-size: 1.5rem;
22}
23
24.three{
25    line-height: 80%;
26    font-size: 1.2rem;
27    padding: 20px 0;
28    width: 25%;
29    background: #57abe7;
30    color: white;
31    font-weight: bold;
32    text-align: center;
33}