Why do we place the two <p> elements on the same line in HTML when we could use an inline class selector?

In this step, we place 2 p elements on the same line.
Since p is block-level element, is it not more effective to use inline class selectors?
How does the inline-block property applied to (.item and .p) factor into all of this, if it does at all? Am i missing something?
Thanks in advance!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p></p></p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%
}

Hi, first of all the p element is Not a block level element, it an inline element which means if the next element is inline it will fall beside it

The .item p selector helps you to style the p tags that are inside the article tag which are classed as item

I hope you understand
You can ask for further help

1 Like

My apologies @RandellDawson, I must have been mistaken
You are correct

I see. That makes sense.

While I understand that these FCC learning steps can appear to be incomplete till the end, is it syntactically correct (outside these steps) to place any 2 p elements side-by-side only in the HTML code? Does that change anything?

Appreciate your reply!

p elements often are placed one after the other in HTML. For example, if you had a section with several paragraphs:

<section>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</section>

Placing them “side-by-side” or “one below the other” is the same thing. Normally, there is a lot of content in a p element so you wouldn’t literally place them “side-by-side” (on the same line) in the HTML document, but you could, and it would make no difference.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.