Examples: https://tstdivi.hrcws.nl/menu-right-aligned-prices/

Option 1 – grid from bullet list

Each menu item is a bullet list with 3 bullets:

• item name
• empty but with class=”dt-space” – creates a dotted line between name and price
• item price

<ul>
	<li>Café</li>
	<li class="dt-space"></li>
	<li>$140</li>
</ul>
Code language: HTML, XML (xml)

<style>
.hws-test1 ul {
    list-style-type: none !important;
    padding: 0;
    display: grid;
    grid-template-columns: max-content auto 80px;
    grid-gap: 10px;
    margin-bottom: 20px;
}
li.dt-space {
    position: relative;
}
.dt-space::after {
    content: "";
    position: absolute;
    display: block;
    bottom: 6px;
    width: 100%;
    height: 3px;
    border-bottom: 1px dotted #e6cdaa;
}
</style>
Code language: HTML, XML (xml)

Option 2 — grid from bullet list

Each menu item is a bullet list with 3 bullets:

• item name
• empty and no class (easier to maintain)
• item price

<ul>
	<li>Café</li>
	<li></li>
	<li>$140</li>
</ul>
Code language: HTML, XML (xml)

<style>
.hws-test2 ul {
list-style-type: none !important;
padding: 0;
display: grid;
grid-template-columns: max-content auto 80px;
grid-gap: 10px;
margin-bottom: 20px;
border-bottom: 1px dotted #e6cdaa;
}
</style>
Code language: HTML, XML (xml)

Option 3 — flex from bullet list

This is a bullet list. Each bullet is one item, the item name and description are wrapped in a <div> which makes it hard to maintain.

<ul>
<li>
<div><strong>Name</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<strong>price</strong>
</li>
<li>
<div><strong>Name</strong></div>
Price
</li>
</ul>
Code language: HTML, XML (xml)

<style>
.hws-test3 li{
display: flex;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px dotted #e6cdaa;
  }
</style>
Code language: HTML, XML (xml)

Option 4 — italic floats right

A simple text module where the price is in Italic which floats right. Very easy to maintain, but only the price can be in italic, nothing else.

<strong>Mulligatawany soup</strong> <em>5.5</em>
Pikante linzensoep op smaak gebracht met diverse kruiden en citroen

<strong>Dal soup</strong> <em>5.5</em>
Noord-Indiase linzensoep gekruid met verse koriander en citroen
Code language: HTML, XML (xml)

<style>
.hws-test4 em {
float: right;
font-style: normal;
}
</style>
Code language: HTML, XML (xml)

Option 5 — flex 2 columns

Same as previous with a div around the part that needs to be displayed in two columns (with flex). Each paragraph goes in the next column.

You have to set the class in the div on the text tab, it doesn’t work if you set it in the module advanced settings.

<div class="hws-2column-menu">
<strong>Mulligatawany soup</strong> <em>5.5</em>
Pikante linzensoep op smaak gebracht met diverse kruiden en citroen

<strong>Dal soup</strong> <em>5.5</em>
Noord-Indiase linzensoep gekruid met verse koriander en citroen
</div>
Code language: HTML, XML (xml)

<div class="hws-2column-menu">

</div>
Code language: HTML, XML (xml)

Instead of using a <div> with the class in the content, you can also add the class to a text module. In that case, you need to change the below css a little (add the inner class of the text module).

• .hws-2column-menu
• .hws-2column-menu .et_pb_text_inner

<style>
/* START menu items in two columns */
@media(min-width: 1024px) {
.hws-2column-menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.hws-2column-menu p {
flex-direction: column;
flex-basis: 50%;
}
.hws-2column-menu P:nth-child(odd) {
padding-right: 15px;
}
.hws-2column-menu P:nth-child(even) {
padding-left: 15px;
}
}
.hws-2column-menu strong{
font-weight: 700;
letter-spacing: 0.1em;
color: #fd6600;
text-transform: unset;
}
.hws-2column-menu em {
float: right;
}
/* END menu items in two columns */
</style>
Code language: PHP (php)