H1 Tag and P Tag on the Same Line

H1 tag and P tag on the same line?

So if you had:

<div id="containerIntro">
    <h1>Headline</h1>
    <p>And here the text right after...</p>
</div>

Your CSS would have to look something like this:

#containerIntro h1,
#containerIntro p {
    display: inline;
    vertical-align: top;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

See http://jsfiddle.net/F3Bcd/3/.

not able to get h1 element and p tag on the same line

To avoid using a wrapper for each <h2><p> line, you can use the <br> tag and set the dispay of each <h2> and <p> to inline-block:

.NativeName {

  vertical-align: top;

  font-family: 'Open Sans', sans-serif;

  font-size: 16px;

  line-height: 28px;

}

h2,

p {

  display: inline-block;

}

<div className="NativeName">

  <h2>Native Name:</h2>

  <p>{country.nativeName}</p>

  <br>

  <h2>Population:</h2>

  <p>{country.population}</p>

  <br>

  <h2>Region:</h2>

  <p>{country.region}</p>

  <br>

  <h2>Sub Region:</h2>

  <p> {country.subregion}</p>

  <br>

  <h2>Capital:</h2>

  <p> {country.capital}</p>

</div>

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

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>

h1 and p tag in same line, but keep h1 width

Here's a jsFiddle of the above...

And one solution

Get both h1 and p to display inline-block:
#header p, h1
{
display: inline-block;
}
Float both elements left, and give #header p a width of less than 60%
Since floating removes elements from the natural document flow, you'll need to set a fixed height to the div container, so that it will still enclose the header.
Add desired margins to get the p element sitting in the right place.

A note: this won't work at smaller screen sizes, since the h1 text will stick out of it's container when it is wider than 40%. I suggest you give the h1 element a fixed width( or min-width) which you're happy with, and let #header p float to the left of it.

How can i keep several p tags on the same line/

Wrap all p in a container and add display: flex. It will place all p tag left to right. But you need to add some space between them with gap: .5rem;

Add space as per your requirements.

TIP: p tags are not for this purpose, they are meant to be come in new line, You should use span instead. They are by default inline

.p-container{
  display: flex;
  gap: .5rem;
}

<div class="diva">
  <h1>Katy's Geck-Tacular Geckos!</h1>
  <div class="p-container">
    <p>Hello</p>
    <p>customer</p>
    <p>welcome!</p>
  </div>
  
</div>

How to write both h1 and h2 in the same line?

Keyword float:

<h1 style="text-align:left;float:left;">Title</h1> 
<h2 style="text-align:right;float:right;">Context</h2> 
<hr style="clear:both;"/>

Align h1 and span in the same line

The updated code is as below:

<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center justify-content-center">
  <h1>Employee details</h1>
  <span class="badge rounded-pill bg-success ms-3">2020-21 period</span>
</div>

Explanation:

Add class d-flex to make h1 and span in same line.
Add class align-items-center justify-content-center to make them center.
(Optional) Add margin by class ms-3 to the span div to add space between h1 and span

Two p tag in same line

You can use CSS flexbox for this. Below is the minimal CSS for the requested layout:

<div style="display: flex; justify-content: space-between;">
  <p style="background-color: papayawhip;">Lorem ipsum dolor sit amet.</p>
  <p style="background-color: palegoldenrod;">Donec eget luctus lacus.</p>
</div>

How to put text on the right side of an h tag?

Without code structure change

Make the elements in the same line inline and just float your date range to the right.

.title-right {

    float: right;

}

.title-left {

    display: inline;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-8">

    <div class="col-md-8">

        <h1 id="title">Education</h1>

        <h4 class="title-left">University</h4>

        <span class="title-right"> 2009 - 2015</span>

        <span>B.Sc in Computer Science</span>

        <span> Grades: 2:1</span>

        <span>

            <h4>Highschool</h4>

            <p>2006 - 2009</p>

        </span>   

    </div>

</div>

H1 Tag and P Tag on the Same Line