--- id: 5f3c866de7a5b784048f94b1 title: Step 37 challengeType: 0 dashedName: step-37 --- # --description-- That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to the first `article` element under the `Coffee` heading. # --hints-- You should apply the `item` class to your `article` element. ```js assert(code.match(//i)) ``` You should only have one `item` class element. ```js assert($('.item').length === 1); ``` Your first `article` element should have the `item` class. ```js assert($('article')[0].className === 'item'); ``` # --seed-- ## --seed-contents-- ```html Cafe Menu ``` ```css 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; } .flavor { text-align: left; } .price { text-align: right; } ```