Putting two elements in the same line

Question

How to put the <p> and the <h3> tags in the same line ? Now the <p> is above the <h3>

I want them on the same line but have different fonts so the H3 cannot go inside the P

<a href="/sharp/posts/{{ $day_qsts_3->id }}">
   <span>
        <p>{{$data->getcategory($data->id)}}</p>
        <h3 style="display: inline-block;">{{$day_qsts_3->title}}</h3>
   </span>
</a>

span is inherently an inline element Abhyudai and you don't have valid HTML span should not contain headers or paragraphs https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element here is another note in the docs: **Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.** — soulshined, Nov 29 '19 at 09:15
Strongly agree with @04FS as i start using stack-overflow to help community of newbie's like am this step really heart a lot and kill the confidence level to ask question — Awais, Nov 29 '19 at 11:31

score 2 · Answer 1 · answered Nov 29 '19 at 09:03

2

Simple:

p{
   display: inline-block;
}

h3{
   display: inline-block;
 }

answered Nov 29 '19 at 09:03

Milan Nikolić

31
2

score 1 · Answer 2 · answered Nov 29 '19 at 13:01

<a href="/sharp/posts/{{ $day_qsts_3->id }}">
        <p style="display: inline-block;">{{$data->getcategory($data->id)}}</p>
        <h3 style="display: inline-block;">{{$day_qsts_3->title}}</h3>
</a>

score -1 · Answer 3 · answered Nov 29 '19 at 08:22

-1

There are lot of ways to achieve that. depends what exactly you want to achieve.

Easiest way would be as shown below.

.text-wrapper {
  display: flex;
  flex-wrap: wrap/* if you want the text always to be in same line, remove this line of code.*/
}

<a href="/sharp/posts/{{ $day_qsts_3->id }}">
  <span class="text-wrapper">
        <p>{{$data->getcategory($data->id)}}</p>
        <h3 style="display: inline-block;">{{$day_qsts_3->title}}</h3>
   </span>
</a>

answered Nov 29 '19 at 08:22

Deepak Yadav

6,804
5
31
49

this is poor practice to recommend invalid HTML. The permitted content model for a span tag is only [phrasing content](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element) – soulshined Nov 29 '19 at 09:21
@soulshined I'm not recommending invalid HTML. The markup was provided by the user. I recommended a solution using same markup. – Deepak Yadav Dec 01 '19 at 11:37

AdamKniec · Accepted Answer · 2019-11-29T11:12:28.493

-2

EDIT: Consider fixing your markup first. Below is one of the solutions using the provided HTML unchanged.

Maybe display: flex on the parent ? :) It will put the child elements in the same line

span {
  display: flex;
}

<a href="/sharp/posts/{{ $day_qsts_3->id }}">
   <span>
        <p>{{$data->getcategory($data->id)}}</p>
        <h3>{{$day_qsts_3->title}}</h3>
   </span>
</a>

edited Nov 29 '19 at 11:12

answered Nov 29 '19 at 08:23

AdamKniec

1,607
9
25

1

this is poor practice to recommend invalid HTML markup. The permitted content for a span tag is only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) – soulshined Nov 29 '19 at 09:18
Yes, You're right. I already edited the post to suggest fixing the markup first. When answering that question, I thought that the author is looking for CSS solution only without changing the HTML (which is wrong - I agree) – AdamKniec Nov 29 '19 at 11:16

Putting two elements in the same line

4 Answers4