HTML&；价目表布局的CSS样式

这可能是一个简单的问题，但我不知道如何处理它

我正在建立一个自助式响应网站，它需要有一个价格表，就像你在外卖菜单传单上看到的那样； 它被放置在一个容器中（因此不是全宽），但理想情况下，它应该在桌面屏幕上看起来像这样：

简短的$50
中等$75
长$一百

然后在平板电脑或手机屏幕上，圆点的数量应该减少，所以看起来像这样

短$50
中等…75美元
长$一百

---

关于最好的方法有什么建议吗？很明显，我希望右边的美元符号都排成一行。

很抱歉没有在我的问题中发布代码片段

无论如何，我找到了自己的答案——我只是没有用正确的查询搜索谷歌

这是我找到的众多解决方案之一（并最终使用）；

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>

---

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是在一个文档中。看见

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;
}