css - CSS「Nowrap」が正しく動作しない

Question

現在メールテンプレートを作成中です。テンプレートには、隣同士に並んだ USP が含まれています。これは私が使用しているコードです:

<td width="100%">
  <span style="white-space: nowrap;">
    <img src="checkmark.png" />&nbsp;&nbsp;[text name="USP1"]
  </span>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <span style="white-space: nowrap;">
    <img src="checkmark.png" />&nbsp;&nbsp;[text name="USP2"]
  </span>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <span style="white-space: nowrap;">
    <img src="checkmark.png" />&nbsp;&nbsp;[text name="USP3"]
  </span>
</td>

「nowrap」を使用して、スマートフォンで USP を相互に配置しようとしています。残念なことに、USP のすべてが隣り合って立っているため、テーブルが広くなります。

小さな画面でそれらを互いの下に立たせるための簡単なインライン CSS トリックはありますか?