html - 两列，顶部对齐，固定宽度布局

Question

我正在尝试为一些数据创建一个两列、顶部对齐、固定宽度的布局，以便将其嵌入到 iPhone 应用程序的 WebView 中的其他文本中。我需要第一列具有固定宽度，以便第二列中的所有项目都整齐对齐。
我使用 HTML、CSS 或两者都尝试了来自 SO 和网络的许多解决方案，但总是失败。不保留列宽，并且条目不顶部对齐。

内容示例：

在第一列中：

Address  
Distance  
Ticket price  

在第二列中：

12-26-3 Kami Itabashi, Itabashi-ku, Tokyo  
23km   
350 Yen

这是我的第一个问题，所以请原谅。

如有必要，我可以提供我的 CSS 样式表。

Answer 1

好吧，这个问题还不清楚，但无论如何：

HTML

<div class="frame">
    <div class="l">
        <p>Address</p>
        <p>Distance</p>
        <p>Ticket<span>price</span></p>
    </div>    
    <div class="r">
        <p><span class="number">12-26-3</span>Kami Itabashi, Itabashi-ku, Tokyo  </p>
        <p><span class="number">23km</span></p>
        <p><span class="number">350</span>Yen</p>
     </div>    

</div>    

CSS

p{
    height:20px;
    color:#000000;
    margin: 20px 0px;
    color:#000000;
}
.frame{
    width:310px;
    height:150px;
    background:#A0A0A0;
}
.number{
    color:#8D0000;
}
.l{
 float:left;   
}

.r{
    width: 220px;
    float:right;   
}

JSFIDDLE