Position two block elements side by side - html

Question

I am trying to create a restaurant menu. I would like each menu item to be formatted as such:
Mozzarella Sticks ($9.95)
To do this I have the following html:
<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>
I have the item name and price in different elements because I would like to make the price smaller, change the color, etc...
My problem is getting both elements to appear next to each other since h3 and p are both block elements. Here are the solutions I have come up with. Solution one:
.menu-item{
display: inline;
}
.price{
display: inline;
}
And adding a line break at the end of each entry:
<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>
<br />
This works however I feel this is not the proper way to do this and that it should be done with CSS.
I have also considered the following, solution two:
<h3 class="menu-item">Mozzarella Sticks <span class="price">5.95</span></h3>
This would allow me style the price separate from the menu item, but including the price in the h3 still feels like an odd way to go about this.
Lastly, I have seen that you can set a width on both elements and then apply float: left; and float: right; but this messes up the spacing, as I would like the elements to appear right next to each other.
Any suggestions? Were any of the ways I listed a good way to about this or is there a better solution?

Answer 1

Try this grid layout. You can customize each block to your own liking.
You can add another column by inserting 1fr
.menu{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'a b';
}
.menu-item{
grid-area: a;
text-align: center;
font-size: 20px;
}
.price{
grid-area: b;
text-align: center;
font-size: 18px;
}
<div class="menu">
<div class="menu-item">Mozzarella Sticks</div>
<div class="price"><i>($9.95)</i></div>
</div>

Answer 2

You can set widths as a percentages, let's say 80% and 20% respectively.
If you set display: inline-block you don't need to set any float. The elements keep having block properties but are kept inside the text flux like they were actual text.
Even though this works alone, i would suggest to also keep a better and cleaner semantic html division, like the ul showdev mentioned or at least a containing div for each couple.

Answer 3

You might consider creating an element for each item with children for the name and price.
Below, I'm using flexbox for item layout.
#menuItems {
margin: 0;
padding: 1em;
}
.menuItem {
margin: 0 0 1em;
display: flex;
}
.menuItemTitle {
flex: 0 0 150px;
margin: 0 1em 0 0;
font-size: 1em;
}
.menuItemPrice::before {
content: "$";
}
<ul id="menuItems">
<li class="menuItem">
<h3 class="menuItemTitle">Mozzarella Sticks</h3>
<span class="menuItemPrice">5.95</span>
</li>
<li class="menuItem">
<h3 class="menuItemTitle">Another Item</h3>
<span class="menuItemPrice">10.50</span>
</li>
<li class="menuItem">
<h3 class="menuItemTitle">Third Item with a Longer Name</h3>
<span class="menuItemPrice">10.50</span>
</li>
</ul>

Answer 4

My problem is getting both elements to appear next to each other since
h3 and p are both block elements. Here are the solutions I have come
up with. Solution one:
In general, if you want two block elements to appear next to each other without using the newer layout methods (flexbox and css grids). You can float the elements and then add a "clear fix" to those elements and here are two ways you do that.
Float the elements, Add an extra div, Add the clearfix
Float the elements, Add a CSS pseudo element "after", Add the clearfix
Method 1: Add extra div
<style type="text/css">
.clearfix{
display: block;
clear: both;
}
h3{
float:left;
}
p{
float:left;
}
</style>
<div class="my-container">
<h3>Hello</h3><p>World</p>
<div class="clearfix"></div>
</div>
Method 2: Add pseudo elem after
<style type="text/css">
.clearfix::after {
display: block;
clear: both;
}
h3{
float:left;
}
p{
float:left;
}
</style>
<div class="my-container clearfix">
<h3>Hello</h3><p>World</p>
</div>
Please note that on method 2, clearfix class was added to the container. Also, notice that a pseudo CSS element ::after was added to .clearfix.
This would allow me style the price separate from the menu item, but including the price in the h3 still feels like an odd way to go about this.
I think you are right. Building HTML should be semantic. Which basically means that your markup/code must be self-explaining or have meaning. In the context of what you are trying to achieve, h3 here (IMHO) doesn't suit what you are really trying to express or do. The reason I say that is because you are to display a list of "menu-items" and h3 by definition is a header so the element doesn't fit what it is trying to display. My recommendation is, instead of using h3, use a list instead, similar to the answer above. This would make your HTML code a lot more semantic and you can now use the other method you've mentioned without making it look weird (because span is inside of h3). It would look similar to the code below instead...
<ul id="menuItems">
<li class="menuItem">Mozzarella Sticks<span class="menuItemPrice">5.95</span</li>
</ul>
Btw, my recommendation above is just my opinion so please take it with a grain of salt. For more info about semantic HTML. You can check the links below
https://www.lifewire.com/why-use-semantic-html-3468271
https://www.w3schools.com/html/html5_semantic_elements.asp
Hope this helps! :)