如何在输入区域旁边创建一个带有提交按钮的自适应表单(电子邮件输入框)?

我正在尝试制作一个自适应表单:

我设法做到了这一点,但编辑它是一场噩梦,并没有真正适应:

<div class="widget">
    <h2>Stay Tuned.</h2>
    <div class="subscribe">
        <form action="" method="get">
            <input type="email" placeholder="Your Email" class="subscribe-input">
            <input type="image" src="https://i.imgur.com/7pyyReI.png" class="subscribe-image">
        </form>
    </div>
</div>

Â

h2 {
    text-transform: uppercase;
    color: #6c6969;
    background: #f8f8f8;
    border-left: 2px solid #58c93a;
    padding: 17px 0 21px 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.subscribe {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 50px;
}

.subscribe-input {
    box-sizing: border-box;
    color: #b9b9b9;
    font-size: 0.75em;
    width: 100%;
    border: 1px solid #e1e0e0;
    padding: 20px 50px 20px 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.subscribe-input::-webkit-input-placeholder {
    color: #b9b9b9;
}

.subscribe-image {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

https://jsfiddle.net/cq8q0y61/

有没有比这个更容易编辑和更具适应性的解决方案?我不想被强迫设置高度。手动订阅类,可以动态更改的字体大小、填充和页边距。订阅输入类,并能够动态地将该按钮图像更改为另一个图像(具有另一个高度和宽度),以便输入文本和按钮仍然垂直居中,并且输入文本不会越过按钮。

在进一步挖掘之后,我发现了如何使用flex方法使其变得更好: https://jsfiddle.net/t3LLcu35/2/

但我仍然有一个问题:当我设置垂直填充或边距时。订阅输入类,图像拉伸:

.subscribe-input {
     padding: 50px 2px 50px 20px;
}

如何更改的边距和填充。订阅输入而不拉伸图像?