pタグ内に入れ子で挿入したsvgの改行を無くしたい

Question

以下のコードでpタグ内にsvgを挿入しましたが、スクリーンショットのように、svg（青いクエスチョンマーク）のみ改行されて表示されてしまいます。

改行なしでクエスチョンマークを表示する方法はありますか？

<p>万が一の事故の際にホストのみなさまをお守りするため、最大US$1,000,000の物損補償および最大US$1,000,000の賠償責任保険がAirbnbの全予約に自動付帯されます。<span><a href="#"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-label="host-insurance" role="img" focusable="false"style="display: block; height: 16px; width: 16px; fill: currentcolor;"><path d="m16 1c-8.271 0-15 6.729-15 15s6.729 15 15 15 15-6.729 15-15-6.729-15-15-15zm0 25a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm1.506-8.062-.006 2.066-3-.008.011-4.288 1.102-.301c1.295-.353 3.466-1.266 3.466-3.407 0-1.833-1.528-2.668-2.948-2.668-1.423 0-2.65.947-3.054 2.358l-2.884-.826c.776-2.711 3.162-4.532 5.938-4.532 3.391 0 5.948 2.437 5.948 5.668 0 2.653-1.687 4.814-4.573 5.938z"></path></svg></a><span></p>
      

Answer 1

すみません一旦回答を取り下げます。

追記

まずspanに閉じタグがないのでそれを修正後、次のCSSを当てれば良さそうです。

span {
  display: inline-block;
  vertical-align: text-bottom;
}

Comments

[MsParrot]

早速のご回答ありがとうございます。閉じタグの/を書き漏らしており失礼いたしました。上記のＣＳＳ試してみます。

[MsParrot]

vertical-align: text-bottom　で上下方向にズレが生じたのですが、text-topで全てが解決いたしました。本当にありがとうございました。