Elements position relative to text input - html

Question

I have the following challenge. When an user is typing somehting in an input field, I want to show a reset button with a position center right of the input.
I am not able to change the html structure of the label, input, button and the error message. And I dont want to use browsers support. Does somebody has a creative idea how to do this? Thanks in advance.
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<input name="coupon" type="text" id="coupon">
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
<a class="reset">x</a>
</div>
</div>

Answer 1

Outline
Wrap anything that you want to stay as it is now with an <div style="display: inline-block;position:relative;">. This creates a positioning context in which you can position anything afterwards. Then position your reset button with position: absolute and the offsets you need, inside and relative to the wrapper you created.
Here's a try at it, but I'm uncertain that I understood your scenario.
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
.input-wrapper {
position: relative;
display: inline-block;
}
.reset {
position: absolute;
right: 3px;
top: 7px;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<div class="input-wrapper">
<input name="coupon" type="text" id="coupon">
<a class="reset">x</a>
</div>
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
</div>
</div>

Answer 2

.form-group {
position: relative;
}
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}
.reset {
margin-left: -20px;
margin-top: 10px;
position: absolute;
}
<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<input name="coupon" type="text" id="coupon">
<a class="reset">x</a>
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
</div>
</div>