Is there a way to make 2 <p> tags in a same line-CodePudding

 ```
 <p class='title'><em>WELCOME TO F-DRIVE</em></p>
 <p class='b'>Free 5GB storage space!</p>```
 ```

this is my line of code. I want both of these sentence to appear in the same line. my css rules are:

```
p.b{
font-size:32px;
font-family: bangers, fantasy;
margin-left: 20px;
}
p.b2{
font-size:32px;
font-family: bangers, fantasy;
margin-right: 20px;
text-align:right;
```

the second one appears a line below the 1st, how do i fix it?

CodePudding user response：

You can use a span instead of a p tag. p is a block element while span is an inline element. You can find out more about the difference here: https://www.sitepoint.com/community/t/p-vs-span/5298

CodePudding user response：

The answer is display: inline-block, but if you want this kind of behaviour u should use span as span is inline element by default. It does not need any additional style

p {
  display: inline-block;
}

<p>aaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbb</p>

CodePudding user response：

I would suggest using <span> for that matter.

CodePudding user response：

Like others said "Instead of wrapping the lines in the p tag, you can use the span.

<span class='title'><em>WELCOME TO F-DRIVE</em></span>
<span class='b'>Free 5GB storage space!</span>

As you asked in this comment: "I used span and it comes inline but I want the 2nd sentence to go at the right side of the page but that doesnt happen even with css. Is there a fix?"

You can wrap the both of the span in the div and use the below css styling to make the text align to the right.

div {
  display: flex;
  justify-content: space-between;
}

<div>
  <span class='title'><em>WELCOME TO F-DRIVE</em></span>
  <span class='b'>Free 5GB storage space!</span>
</div>