Can't seem to put h1 tag on the same line as a p tag

May 31, 2022

I want to put the balance in the upper right-hand corner of the website but for some reason I cannot get the p tag next to the h1 tag. I am very new to HTML and CSS. Any help is appreciated. I have tried to add display inline for the h1 tag and float right for the p tag as suggested by another post I saw. I also have tried setting the p tag to inline block.

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>

>Solution :

You can align two block elements by using flexbox. Assign to your div which wrapped the h1 and p tag a class like for example .line.

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}

in you html

<body>
  <div class="line"> <!-- <<<<< add this class -->
    <h1> Dealer:<span id="dealer-sum"></span> </h1>
    <p>Balance: <span id="balanceAmt">50</span>$ </p>
  </div>

Small note to your code:
you use this in your tags: display="inline". that has no effects. if you want inline styling then you have write: style="display:inline;".

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; 
}

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}

<!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 class="line">
    <h1> Dealer:<span id="dealer-sum"></span> </h1>
    <p>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>