如何跨越元素而不使CSS移动它们？

Question

我有一些居中的输入框。

我正在尝试在投注框的右侧添加文字。以下是我做的事情：

我该如何解决这个问题？我使用span元素将它们放在同一行。什么CSS属性可以解决这个问题？

CODE：

HTML：

<div class="paper">
    <h2>Play</h2>
    <div class="gamebox">
        <h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
        <div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some?</div>
        <h3 id="balance">Balance: 1000BTC</h3>
        <form>
            Bet
            <br>
            <span>
                <input id="userbet" onchange="checkBet()" value="1" type="text" name="bet">Error, that bet is not valid.
            </span>
            <br>
            Chance<br>
            <input id ="userchance" value="50" type="text" name="chance">
            <br>
            <h3>Payout: 0BTC</h3>
            <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
        </form>
        <button type="button" id="autobet">Autobet</button>
    </div>
</div>

CSS：

input[type=text] {
    width: 20%;
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    display: inline-block;
}

Answer 1

围绕其他文字制作span并将其position设置为absolute。

https://jsfiddle.net/xuhdy7Lc/