Not able to see entire text when embeded clear button in inputbox

In Angular, I have added clear button inside input box but after adding it I am not able to see entire text in input box as it is being overlapped. Please find detailed information below.

HTML Code

<ng-template pTemplate="input">
<input pInputText type="text" class="col-input-grid-100" >
<span class="mar-left">
<button (click)="clearmail1(ri)" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
<i class="pi pi-times"></i>
</button>
</span>
</ng-template>


CSS content

.col-input-grid-100{
width: 135%;
margin-left: -10px;
}

.mar-left{
margin-left:-29px;
}


Current Output: Text in input box is test3@test.com.





As you can see in above image "com" is not visible clearly. I tried multiple ways but things didnt work. Kindly help me to resolve this issue.

Note:
1. I want to show cross button inside input box only
2. I am not using bootstrap library.

Continue reading...