Why are my elements losing position? - html

Question

So here is my box:
BOX
Ok, now I want to add box near the input of the BET box.
<div id="x2"></div> <!-- HTML --->
/* CSS */
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
}
The box after I add it:
BOX-AFTER
As you can see, it messed up the thin gray line and everything underneath it. I'm really not sure why.
HTML:
<div class="gamebox">
<div id="bet-and-chance-texts">
<p id="bettext">BET</p>
<p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p>
</div>
<div id="bet-and-chance-input-boxes">
<input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off">
<div id="x2">x2</div>
<input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off">
</div>
<br>
<div class="line-separator"></div>
<div id="button-texts">
<p id="roll">ROLL UNDER</p>
<p id="payout">PAYOUT</p>
<p id="chance">CHANCE</p>
</div>
<div id="buttons">
<input class="hidden-boxed-input-roll" value = "50.00"/>
<input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/>
<input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/>
</div>
<br>
<div id="rolldice-section">
<button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button>
</div>
</div>
CSS:
.gamebox {
height: auto;
padding: 20px;
width: 60%;
font-family: Helvetica Neue;
color: black;
margin-top: 20px;
margin-left: 20px;
background-color: white;
}
.line-separator{
height:.5px;
background: lightgray;
border-bottom:.5px solid lightgray;
}
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
float: left;
}
input[class="default"]{
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
text-align: center;
background-color: #E4ECF1;
display: inline-block;
}
p[id="roll"]{
display: inline-block;
float: left;
font-size: 13px;
}
p[id="payout"]{
display: inline-block;
margin-right: 25px;
font-size: 13px;
}
p[id="chance"]{
display: inline-block;
float: right;
font-size: 13px;
}
div[id=button-texts]{
text-align: center;
}
Why does everything below the thin gray line get messed up? How can I solve this?

Answer 1

Change this :
<div id="x2">x2</div>
to :
<span id="x2">x2</span>
since div have block display and you need to use span which is inline
then change your style, remove float and add some padding to #x2 :
#x2 {
padding: 13px;
width: 40px;
height: 40px;
background: cornflowerblue;
}