2カラムないの左寄せと右寄せ表示について

初心者の者です。
「Shortcodes Ultimate」というプラグイン中の、
「columns」という２カラムに分割するショートコードを使って飲食のメニューを作ってます。
ショートコード自体は、クラス指定しないでテキストを入力する場合、問題なく２列に表示されるのですが、
下記のようなクラス指定をした場合、２列になりません。
不具合が出て、１列目の下に２列目来てしまいます。
ショートコードが関係しているので、わかりにくかも知れませんが、
２列になるようcssに誤りがありましたら、ご教示いただけたら幸いです。

【表示させたいカタチ】

　　　　　　　左列　　　　　　　　　　　　　　　　　　　　　　　　　　右列

Espresso　　　　　　　　　　　　　¥450　　　　　　Drink　　　　　　　　　　　　　　　¥450

※価格は列の右揃え

【実際に表示されてしまうカタチ】

Espresso　　　　　　　　　　　　　¥450

Drink　　　　　　　　　　　　　　　¥450

【html】

[su_row][su_column size=“1/2” center=”no” class=””]
<div class=”coffee-menu”>
<div class=”espresso-menu”>Espresso</div>
<div class=”prices”>¥450</div>
</div>
</div>
[su_divider top=”no” style=”dotted” divider_color=”#999999″ size=”1″ margin=”15″ class=””]
</div>[/su_column]

[su_column size=“1/2” center=”no” class=””]
<div class=”coffee-menu”>
<div class=”espresso-menu”>Soft Drink</div>
<div class=”prices”>¥450</div>
</div>
[su_divider top=”no” style=”dotted” divider_color=”#999999″ size=”1″ margin=”15″ class=””]
</div>[/su_column][/su_row]

【css】

.coffee-menu{
font-family: Lora,serif;
font-size: 16px;
font-weight: 700;
letter-spacing: .03em;
display: table;
}

.espresso-menu{
text-align: left;
display: table-cell;
}

.prices{
text-align: right;
display: table-cell;
}