価格表レイアウト用のHTMLとCSSのスタイリング

Question

これはおそらく簡単な方法ですが、アプローチ方法はわかりません。

私はBootstrapレスポンシブウェブサイトを構築しています。これには、価格表を用意する必要があります。テイクアウェイメニューのチラシで見るスタイルです。 コンテナ内に置かれています（全幅ではありません）が、理想的にはデスクトップ画面で次のように表示されます：

短い................. ................................. $ 50
中............. ................................. $ 75
ロング............. ...................................... $ 100

タブレットまたはモバイル画面ドットの量を減らす必要があるので、このように見えます。

短い... $ 50
ミディアム... $ 75
ロング......これにアプローチする最良の方法で$ 100

任意の提案ですか？そして明らかに私はすべてのラインナップに右のサイドドル記号が欲しい。

Answer 1

申し訳ありませんが、私の質問でコードスニペットを投稿しません。

とにかく、自分の答えを見つけました。私はちょうど正しいクエリでGoogleを検索していませんでした。

これは私が見つけた（そして使用し終えた）多くの解決策の1つでした。 JS Fiddle Example

HTMLコード：

<div class="left">Name:</div> 
<div class="right">Engineer</div> 
<div class="dotted"></div> 
<div class="left">Factory location:</div> 
<div class="right">not invoice address</div> 
<div class="dotted"></div> 

CSSコード：

div{ 
     height:1em; 
    } 
    .left,.right{ 
     padding:1px 0.5em; 
     background:#fff; 
     float:right; 
    } 
    .left{ 
     float:left; 
     clear:both; 
    } 

.dotted{ 
    border-bottom: 1px dotted grey; 
    margin-bottom:2px; 
}