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

Question

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

内容示例:

第一列:

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