I'd probably go with a table for this (see below) - I think a definition list would start breaking up at smartphone width as the dt and dd would not be the same height.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MENU</title>
<style>
body {
font-family: helvetcica, sans-serif;
font-size: 14px;
line-height: 22px;
}
.menu-wrapper {
background-color: #576c81;
padding: 20px 15px;
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.starters-salads {
float: left;
width: 48%;
}
.mains {
float: right;
width: 48%;
}
.menu td {
vertical-align: top;
padding: 12px 12px;
color: #fff;
line-height: 22px;
}
.menu th {
text-align: left;
}
.menu h2 {
margin: 0;
padding: 0 0 0 12px;
color: #fff;
font-size: 22px;
line-height: 30px;
font-weight: normal;
}
.menu h3 {
margin: 0;
padding: 0 0 5px 0;
font-size: 18px;
font-weight: normal;
}
.menu p {
margin: 0;
padding: 0;
}
.no-wrap {
white-space: nowrap;
display: block;
}
.odd {
background-color:#8292a2;
}
.even {
background-color:#576c81;
}
.price {
text-align: right;
}
@media (max-width:768px){
.starters-salads {
float: none;
width: 100%;
}
.mains {
float: none;
width: 100%;
margin: 25px 0 0 0;
}
}
</style>
</head>
<body>
<div class="menu-wrapper">
<!-- STARTERS AND SALADS -->
<table class="starters-salads menu" cellpadding="0" cellspacing="0" border="0">
<tr>
<th><h2>STARTERS & SALADS</h2></th>
</tr>
<tr>
<th> </th>
</tr>
<tr class="odd">
<td class="description">
<h3>Chilli & Garlic Prawns</h3>
<p>Tiger prawns with a hint of chilli, garlic sauce & garlic toast</p>
</td>
<td class="price">
<span class="no-wrap">h $16.50</span>
<span class="no-wrap">f $25.50</span>
</td>
</tr>
<tr class="even">
<td class="description">
<h3>Crumbed Calamari</h3>
<p>Tiger prawns with a hint of chilli, garlic sauce & garlic toast</p>
</td>
<td class="price">
<span class="no-wrap">h $16.50</span>
<span class="no-wrap">f $25.50</span>
</td>
</tr>
<tr class="odd">
<td class="description">
<h3>Creamy Bacon & Garlic (gf)</h3>
<p>Tiger prawns with a hint of chilli, garlic sauce & garlic toast</p>
</td>
<td class="price">
<span class="no-wrap">h $16.50</span>
<span class="no-wrap">f $25.50</span>
</td>
</tr>
</table>
<!-- MAINS -->
<table class=" mains menu" cellpadding="0" cellspacing="0" border="0">
<tr>
<th><h2>MAINS</h2></th>
</tr>
<tr>
<th> </th>
</tr>
<tr class="odd">
<td class="description">
<h3>Chicken Bosciola</h3>
<p>Tiger prawns with a hint of chilli, garlic sauce & garlic toast</p>
</td>
<td class="price">
<span class="no-wrap">h $16.50</span>
<span class="no-wrap">f $25.50</span>
</td>
</tr>
<tr class="even">
<td class="description">
<h3>Chicken Schnitzel</h3>
<p>Tiger prawns with a hint of chilli, garlic sauce & garlic toast</p>
</td>
<td class="price">
<span class="no-wrap">h $16.50</span>
<span class="no-wrap">f $25.50</span>
</td>
</tr>
<tr class="odd">
<td class="description">
<h3>Chicken Parmagiana</h3>
<p>Tiger prawns with a hint of chilli, garlic sauce & garlic toast</p>
</td>
<td class="price">
<span class="no-wrap">h $16.50</span>
<span class="no-wrap">f $25.50</span>
</td>
</tr>
</table>
</div>
</body>
</html>
