html自动排序条形图,html – 使用CSS拆分条形图

我正在尝试使用CSS创建一个分割条形图.我的意思是这样的……

_____ __________

__|____| Text |_________|

|_______| Text |___|__

|______| Text |______|

(请原谅粗略的图纸！我希望它有意义)

无论如何,我到目前为止的代码创建了我在JSFiddle上附加的内容

HTML：

2008

2009

2010

2011

2012

2013

CSS：

dt {

float: left; padding: 4px;

}

.bar {

margin-bottom: 10px;

color: #fff;

padding: 4px;

text-align: center;

background-color: #FFC94D;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

我已经玩了好几个小时,但是无法弄清楚如何最好地在文本中心栏的左侧放置第二个栏.我得到的最接近的是两个酒吧在彼此的顶部？！我认为有一种更好的方法可以做到这一点,但老实说我没有线索.有没有人有可能的解决方案？

非常感谢,

戴夫