Есть инпут, внутри которого справа в конце кнопка (здесь зеленый квадратик). По условиям инпут должен выступать за свой блок, поэтому задаю ему ширину 120% (или аналогично в vw). Проблема такая - при изменении разрешения экрана инпут тоже увеличивается или уменшается, а кнопка смещается. Как запозиционировать кнопку, чтобы при изменении длины инпута она всегда была в одном и том же месте инпута?
.subscribe__form {
position: relative;
width: 100%;
}
.form-wrapper {
margin-bottom: 5.18vh;
}
.input {
padding-left: 2.29vw;
width: 34.58vw;
height: 6.84vh;
background: #fff;
border: 1px solid #E3E3E4;
border-left: 4px solid #4066A5;
box-sizing: border-box;
}
.button {
position: absolute;
top: 50%;
left: 30%;
width: 30px;
height: 30px;
transform: translateY(-50%);
background-color: green;
opacity: 0.3;
border: none;
cursor: pointer;
}
<div class="form-wrapper">
<form action="" class="subscribe__form">
<input type="email" name="email" class="input" id="" placeholder="Type your email" />
<button type="submit" class="button">->
</button>
</form>
</div>