You just shift the left position with 10% for each bar.
.graph_top {
width: 100%;
height: 50px;
max-height: 50px;
position: relative;
}
.bar{
position:absolute;
bottom: 0;
width: 10%;
background-color: #aeaeae;
}
<div class="graph">
<div class="graph_top">
<div class="bar" style="height: 1px;left:0;"></div>
<div class="bar" style="height: 11px;left: 10%;"></div>
<div class="bar" style="height: 30px;left: 20%;"></div>
<div class="bar" style="height: 25px;left: 30%;"></div>
<div class="bar" style="height: 15px;left: 40%;"></div>
<div class="bar" style="height: 6px;left: 50%;"></div>
</div>
<div class="horizontal_line"></div>
<div class="graph_bottom">
<div class="bar2" style="height: 1px;"></div>
<div class="bar2" style="height: 11px;"></div>
</div>
</div>