如何从相对位置删除额外空间添加高度?

我有一个悬停,允许用户在输入密码时从“显示/隐藏”更改为:

<label for="Password">Create a Password</label>
@Html.PasswordFor(m => m.Password)
<span class="input-hover password-show">SHOW</span>
<div class="validation-rules"></div>
<label for="ConfirmPassword">Confirm Password</label>
@Html.PasswordFor(m => m.ConfirmPassword);
<span class="input-hover confirmpassword-show">SHOW</span>


input + .input-hover{
    position: relative;
    display: inline-block;
    height: 46px;
    width: 50px;
    top: -46px;
    left: calc(100% - 70px);
    line-height: 46px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #B2B4B2;
    font-weight: bold;
    text-align: right;
    z-index: 10;
}

这会将46px添加到流中。所以我的输入和下一个标签之间的元素有46px的高度…即使我的元素设置为-46px;

我不能使用绝对值,因为我希望它是相对于当前输入的,而不是相对于祖辈容器的(必须是响应的,并且允许添加/删除dom元素……验证规则)。

边距:-46px;将高度拉回到正常值…某种程度上。似乎把左边的计算搞砸了。

我可以调整它使单词合适,但是当设置边距时为什么它会向左移动?-46px;这没有任何意义。你知道怎么做吗?

这是一把小提琴,看看我有什么: FIDDLE

谢谢!