curriculum/challenges/english/blocks/workshop-cafe-menu/5f3c866d28d7ad0de6470505.md
The flavors and prices are currently stacked on top of each other and centered with their respective p elements. It would be nice if the flavor was on the left and the price was on the right.
Add the class name flavor to the French Vanilla element.
You should add the flavor class to your p element.
const el = document.querySelector("p.flavor");
assert.exists(el);
You should only have one element with the flavor class.
const elements = document.querySelectorAll('.flavor');
assert.lengthOf(elements, 1);
Your flavor class should be on the p element with the text French Vanilla.
const el = document.querySelector(".flavor");
assert.equal(el?.innerText.trim(), "French Vanilla");
<!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>
--fcc-editable-region--
<p>French Vanilla</p>
--fcc-editable-region--
<p>3.00</p>
</article>
<article>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
<p>Pumpkin Spice</p>
<p>3.50</p>
</article>
<article>
<p>Hazelnut</p>
<p>4.00</p>
</article>
<article>
<p>Mocha</p>
<p>4.50</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;
}