Html 如何格式化此显示以对齐？

我动态创建了div，每个div包含：

Author: author blah blah
Title: title blah Blah
Date: date blah

我希望这些值是齐平的：

Author: author blah blah
Title:  title blah
Date:   date blah

我会使用两个单独的div-一个用于保存标题，另一个用于保存Vale，但这样可能会发生：

Author: author blah blah
Title:  title blah bladi blah over...
Date:   ...flow of Title data
        date blah

（如果值大于div，我需要允许值断开并显示）

我试过设置空格（在这里效果很好！！！），但它们在我的页面上没有对齐-有些行是1/4-1/2的

我试着将我的输出包装在pre标签中，并从记事本中复制标签，但这使我的输出变成了打字机字体，而不是我想要的Arial/Helvetica字体

有没有更聪明的方法来实现这一点

---

感谢您的时间和帮助。

HTML请使用JSFIDLE，但这是真正的表格数据，因此表格在这里是有意义的。完美的解决方案-我实现了它，它看起来很棒。谢谢你，保利！