Css 具有不同高度的多个div（在底部）的放置

我正在尝试使用我自己的css实现一个简单html页面的条形图。我正处于创建html和css的初始阶段。下面是我的html和css

小提琴：

我希望我的“栏”保持在“行”上，即使我更改了“栏”的高度

HTML:

---

你所有的酒吧都必须是绝对的，并且有一个底部0

我希望我的“酒吧”保持在“线”上，即使我改变了“酒吧”的高度。我不明白，我有多个酒吧班，如果我改变高度，它应该留在底部。非常感谢@Stephen，工作顺利。

<div class="bar-holder">
<div class="bar car"></div>
<div class="bar fat"></div>
<div class="bar iron"></div>
</div>
<div class="line"></div>

.bar-holder
{
height:auto;
width:100%;
float:left;  
}
.line {
width:100%;
height:3px;
background:#000;
float:left;
position:relative;
}
.bar {
height:350px;
width:40px;
float:left;
margin-left:20px;
border:1px solid #dedede;
bottom:0;
}
.car {
background:blue;
height:240px;
}
.fat {
background:red;
height:300px;
}
.iron {
background:black;
height:330px
}