HTMLのテキストボックス右端にアイコンを固定して表示したい。

Question

ご質問を見て下さり、ありがとうございます。

HTMLのテキストボックス内の右端に「fontawesome」のチェックアイコンを固定して表示したいです。
HTMLのテキストボックスに入力成功した際に、画面サイズが変更になっても位置は変わらずにチェックアイコンを右端で固定したいのですが、上手くいきません。
以下のサンプルコードのような感じで、入力成功時にjavascriptでclass名を追加してアイコンを右端で固定しようとするのですが、画面サイズを変更するとずれてしまいます。
どのようにすれば固定して表示できるでしょうか？

回答よろしくお願い致します。

<input type="text" class="parent">
<i class="fa fa-chk"></i>
コード

.parent{
    position: relative;
}

.fa-chk {
   position: absolute;
   top: ○％；
   right: ○％；
}

Comments

[m.ts10806]

過去の質問に未解決のものが多く見受けられます。
質問への追記修正依頼や回答もついているのにスルーしているものがあるようですが、そちらの解決が先ではないでしょうか。

[退会済みユーザー]

解決済みにできるところはしました。
回答よろしくお願いいたします。

[m.ts10806]

そうですか。
> https://teratail.com/help/question-tips#questionTips4-1
> 一番役に立った回答をベストアンサーに選んでください。

「回答の通りにしました」という雑な回答が「一番役に立った」とは思えませんが。

Answer 1

Lhankor_Mhyさんのソースコードを見本に修正を行いました。
ありがとうございます。

Answer 2

ラップしないと難しいでしょうね。たとえば：

サンプル

<div>
<input type="text" class="parent" size="200">
<i class="fa fa-check"></i>
</div>

div{
  width: max-content;
}