Question 299813 in Html Question posted in
Some basic documentation can be found here.

Html – How to put heading and paragraph on the same line?

I’ve been trying to get a <p> and an <h4> element on the same line (inside of a card).

What I’ve tried is the following:

.where,
.location {
  display: inline-block;
  color: #acdd1b;
  font-size: 15px;
  font-weight: 150px;
}

.when,
.dates {
  display: inline;
  color: #ddd01b;
  font-size: 15px;
}
<p class="where">Where:</p>
<h4 class="location">Gili Air - Lombok, Indonesia</h4>
<p class="dates">When:</p>
<p class="dates">01-01-'24 - 01-03-'24</p>

This didn’t work, they are still on two seperate lines. (although the inline-block leaves less of a gap)

After I tried to put them into a <div class="line">, as someone had suggested in earlier posts. If I then set the CSS to .line {display: flex; align-items: center;} it works, but it becomes really ugly as the heading sits higher than the paragraph.

Can someone point me in the right direction? Or is there no other way than to style the .line and pull up the haeding tag manually?

Tags:

3

Answers


  1. 0

    You can use the display: flex; property on their container. (And set the width of your card container.)

    .your-container-name {
  display: flex;
  align-items: center;
}
    Login or Signup to reply.
  2. 0

    Why don’t you do like this?

    .location{
  font-size: 15px;
  font-weight: 600;
}
    <p class="where"> Where: <span class="location"> Gili Air - Lombok, Indonesia </span> </p>
    Login or Signup to reply.
  3. 0

    you could use the <strong></strong> tag inside of your <p> tag to create a bold section. You can also style it with CSS to be more like a header if you wanted to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search