Javascript 如何将关闭图标移动到搜索栏的右内侧？

我正在制作一个维基百科查看器。单击放大镜时，它将消失，并显示搜索栏和关闭图标

如何将关闭/清除图标移动到搜索栏的右内侧

$（文档）.ready（函数（）{
$（“.fa搜索”）。单击（函数（）{
$（“.fa搜索，表单”）.toggle（）；
});
});
html，正文{
身高：90%；
背景色：#033350；
}
h1{
文本对齐：居中；
边缘顶部：30px；
颜色：白色；
}
.container，.row{
身高：90%；
}
法兰西{
显示：内联块；
颜色：橙色；
}
/*因为某种原因不起作用。。。
a、 a：聚焦{
大纲：无；
边界：无；
}
*/
a:悬停{
不透明度：0.6；
}
形式{
显示：无；
}
.搜索栏{
边框：4倍纯色橙色；
边界半径：20px；
左侧填充：15px；
高度：40px；
背景色：#033350；
颜色：白色；
}
.离子闭合圆{
颜色：橙色；
}

维基百科查看器
将其添加到CSS文件中。将“关闭”按钮设置为绝对位置允许元素浮动在搜索字段的顶部，并将表单设置为相对位置约束，即“关闭”按钮的顶部和右侧值。另外，在.searchBar中添加一个右键填充，使输入的文本不会溢出关闭图标

form {
    position: relative;
}
.ion-close-round {
    position: absolute;
    color: orange;
    right: 15px;
    top: 7px;
}
.searchBar {
    padding-right: 30px;
}

它已经在搜索栏的右侧。你想在搜索栏里面吗？？？是的，在搜索栏里面的右边当我在搜索栏中键入许多单词时，关闭图标出现在单词的顶部并覆盖它。我如何才能使清晰的图标不覆盖文字？？我应该改变显示，还是应该怎么做？在.searchBar元素的右边添加一个填充