How can I align the balance to the upper right-hand corner of my website? I'm new to HTML and CSS and struggling to get the p tag next to the h1 tag. I've tried using display inline for the h1 tag and float right for the p tag, as well as setting the p tag to inline block based on some suggestions I found online.
body {
text-align: center;
font-family: sans-serif;
}
.cards {
height: 175px;
width: 125px;
margin: 1px;
}
.hitButton {
width: 100px;
height: 50px;
font-size: 20px;
}
.resetButton {
width: 125px;
height: 50px;
font-size: 20px;
}
.standButton {
width: 100px;
height: 50px;
font-size: 20px;
}
.slidecontainer{
text-align: center;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body>
<div>
<h1 display="inline"> Dealer:<span id="dealer-sum"></span> </h1>
<p display="inline-block">Balance: <span id="balanceAmt">50</span>$ </p>
</div>
<div id="your-cards"> </div>
<h1 class="center">Player:<span id="player-sum"></span></h1>
<div class="slidecontainer">
<p>You will bet: <span id="betAmt">0</span>$. Next round</p>
<input type="range" min="0" max="100" value="0" class="slider" id="betSlider" oninput="updateSlider()">
</div>
<div>
<br>
<button class="hitButton" id="hitId" onclick="hit()">Hit</button>
<button class="standButton" id="stanId" onclick="stand()">Stand</button>
<button class="resetButton" id="resetId" onclick="resetGame()">Deal Cards</button>
</div>
<h1 id="result"></h1>
</body>
</html>