How to keep text from mis-aligning with another in CSS

Question

I'm using a plugin for my WordPress website and am having trouble with CSS. When the text description of the food item in the menu overflows and drops to the next line, it misaligns the price of the food. I've tried using word-wrap: break-word, padding and margins, but am unsure how to fix the problem. If I make the text smaller it will of course be aligned properly but the problem will still occur if the text is too much and of course it's hard to read as well.

problem: http://i.imgur.com/jYy4Vzg.jpg as you can see when the description overflows the price messes up.

website: http://www.handynasty.net/ucity/menu/ -> drinks -> cocktails

Any help would be very much appreciated, thanks a lot!

Answer 1

Just give the max-width to the parent of the item-text and desc

Example:

HTML

<div class="desc-cont">
<p class="item-text">..</p>
<p class="desc">..</p>
</div>

CSS

.desc-cont {
 max-width: 500px;
}

or

.desc-cont{
max-width: calc(100% - 34px) // width of the value
}