如何在不使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/