Html <；a>；css中的标记似乎不正确

这是我的html/css代码：

<p>
  <img src="image.jpeg">
  <a href="#" style="position: absolute;margin-left: 3%;">Upgrade or 
  downgrade my plan</a>
</p>

这就是出现的情况：

但是，我希望它看起来像这样：

---

如何使其看起来像上面的图像？

标签

a

的样式与其他样式重叠。因此，请使用以下代码进行更改：

p a {
    border-bottom: none!important;
    text-decoration: underline!important;
    font-size:18px!important;
    font-family: "Times New Roman", Georgia, Serif; 
}

---

标签

a

的样式与其他样式重叠。因此，请使用以下代码对其进行更改：

p a {
    border-bottom: none!important;
    text-decoration: underline!important;
    font-size:18px!important;
    font-family: "Times New Roman", Georgia, Serif; 
}

.链接参考{
位置：绝对；/*已存在的样式*/
左边距：3%；/*已存在样式*/
文字装饰：下划线；
颜色：#111；
}

添加！重要提示和添加常用元素的注释可能会影响页面中的其他元素

.链接参考{
位置：绝对；/*已存在的样式*/
左边距：3%；/*已存在样式*/
文字装饰：下划线；
颜色：#111；
}

---

添加！“重要信息”和“为常用元素添加注释”可能会影响页面中的其他元素

文本按您的需要显示，可能有其他代码干扰。文本显示如您所愿，可能有另一个代码正在干扰。