Javascript 使用CSS在段落文本后放置图标，而不考虑行长

我正试图在最后一段文字后添加一个图标，我正在使用JavaScript添加该文字。我的问题是，最后一段文字的长度是不同的，并且根据我当前的样式，使图标排成一行，它只适用于一个特定的长度。如果段落长了几个字，图标将出现在文本上，例如：

如何设置图标和文本的样式，使其显示在每个段落的末尾，而不考虑长度？目前，我正在使用position

absolute

，同时调整右边距和上边距的位置

下面是我在本例中使用的CSS属性：

.paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
}

.icon-lock {
position: absolute;
right: 54%;
margin-top: -30px;
}

我的预期结果是，无论长度如何，图标都会出现在段落末尾，而不会与文本输出重叠

---

这里是一个链接，指向一个示例，我没有绝对定位图标，而是将文本放在一个

中，并将
.icon lock
放在同一级别，然后将
display:inline
添加到新的
和
.icon lock
。
这样，图标将始终位于段落末尾的旁边

工作示例：
这是
。段落：最后一个子项：：在{content:'\1F516'；}
之后，但不会使用材质ui图标。
    .paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
position:relative;
}
.paragraph::after{
  content: '\1F516';
  position:absolute;
  bottom:5px;
  padding-left:10px;
}