Javascript 尝试定位图标以与两行跨距元素中的第一行文本对齐

我在react应用程序中有一个容器，它有一个图标和一个span元素

我试图将图标与span元素中的第一行文本对齐，并使第二行文本中断，并从下一行开始

我目前将图标与span元素中的文本对齐，但问题是无论我使用什么，包括

overflowWrap:“break word”

，span元素中的文本都保持在一行

我有下面容器的HTML以及样式，我还包括一个CodeSandbox：

HTML

<AddressContainer>
  <MapIcon />
    <Address>
        {location.address.addressLine1} {location.address.addressLine2 
        {location.address.city}, {location.address.state} {location.address.zip5}
    </Address>
</AddressContainer>

---

将您的

MapIcon

标记放在

地址

标记内，如下所示：

<Address><MapIcon/> 999 Fiction Ave TownCity, CA 12345</Address>

---

你能在文本中添加一个
标记吗？你能在一个代码片段中提供输出HTML和CSS吗？@Paulie_D Yeup，我刚刚添加了一个代码沙盒来显示这个问题@Dylan当我添加

时，它会重新定位所有元素，使图标不再与第一行文本对齐。有没有办法让第二行文本在第一行文本的右下方对齐？将
文本对齐：“左”
添加到您的地址spanAh我试过了，但是当窗口大小减小时，图标会在两行之间的中心对齐，而不是与文本的顶行对齐真的吗？真奇怪。因为这是我得到的结果：。你有没有像我的回答中提到的那样把MapIcon标记放在地址标记中？这部分起作用，但我正试图让第二行文本在第一行文本的正下方对齐，而不是从MapIcon的底部开始
<Address><MapIcon/> 999 Fiction Ave TownCity, CA 12345</Address>