Two P Tag in Same Line

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

Display inline two p tag

Use float:left on the first p and float:right on the second.

HTML

<div>
   <p class="pull-left">Text in left paragraph</p>
   <p class="pull-right">Text in right paragraph</p>
</div>

CSS

.pull-left {float:left;}
.pull-right {float:right;}

JSFiddle

Two p tag set in one line?

Add .inline class to both paragraphs. Consider using span instead.

.inline {

  display: inline;

}

<p class="inline">First Name</p>

<p class="inline" id="name">Ram.</p>

<p>

how to get the same line through different p Tags

I'd suggest using <span> tags and wrapping them in another element. Use a pseudo-element on the wrapper to make your "linebreak" span multiple elements of different font sizes and line heights without breaking.

.price {
  position: relative;
  display: inline-block;
}

.price::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  border-bottom: solid 1px #000;
}

.prixunit {
  font-size: 20px;
  line-height: 20px;
}

.tnd {
  font-size: 13px;
  line-height: 26px;
  padding-left: 5px;
}

<p class="price">
  <span class="prixunit">560</span>
  <span class="tnd">TND</span>
</p>

How do I force a and p elements to stay on the same line?

how about using span tag instead of p tag.

<a style="color:#39d5f6" href="#">READ</a>
<span style="color: white">|</span>
<a style="color:#39d5f6" href="#">INFO</a>

Align the two p element in the same line

Inline(-block) elements (the paragraphs in this case) are aligned vertically in their baseline by default. You could add vertical-align: top; to fix the alignment issue.

Updated Demo.

.logo p {
    /* other styles goes here... */
    display: inline-block;
    vertical-align: top;
}

For further details you can refer this answer.

Can you put two separate p tags on the same line and still edit them separately

give display:inline-block; to your p class and a proper width and they will come in one line, having display:inline remove the option of giving dimension to the element!
do it this way :

demo here

p {
    height:100%;
    width:50%;
    display:inline-block;
    border:1px solid red;
}

CSS, center two p elements on the body (at same line)

Apply the text-align: center; property to .paragraph-wrapper, not to the p-tags:

.paragraph-wrapper {

    text-align: center;

    background-color: #000;

}

.paragraph-wrapper p {

    display: inline-block;

}

p.white-text {

    color: white

}

p.orange-text {

    color: orange;

}

<div class="paragraph-wrapper">

    <p class="white-text">Foo? </p><p class="orange-text">Bar.</p>

</div>

---

Related Topics