adding div messes the entire design - html

Question

Pleas have a look at my code here.
http://jsfiddle.net/xymgwonu/3/
The code works fine, until I add a new div <div class="bubble"> </div>. It messes with my entire design. I am trying to align bubble with the horizontal line,but it makes a gap b/w circle and the below vertical line.

Answer 1

here you go, enjoy it :) http://jsfiddle.net/xymgwonu/13/
.bubble {position:absolute; margin-top: -40px;}

Answer 2

HTML:
<div class="group">
<div class="vl"></div>
<div class="circle"> </div>
<hr class="hr" />
<div class="bubble"></div>
</div>
<div class="group">
<div class="vl"></div>
<div class="circle"> </div>
<hr class="hr" />
<div class="bubble"></div>
</div>
<div class="group">
<div class="vl"></div>
<div class="circle"> </div>
<hr class="hr" />
<div class="bubble"></div>
</div>
CSS:
.group {
padding:10px;
}
.vl {
margin-left: 50px;
padding: 50px;
position: relative;
border-left: 5px solid blue;
}
.circle {
color: white;
margin-left: 46px;
width:10px;
height:10px;
border: 2px solid #666666;
border-radius: 50%;
z-index:2
}
.hr {
margin-left: 60px;
margin-top: -10px;
width: 250px;
border-top: 5px solid #ccc;
}
/* This is for the cloud */
.bubble {
position: relative;
margin-top:-40px;
margin-left:340px;
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 100px;
width: 275px;
}
.bubble::after {
background-color: #F2F2F2;
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4);
content: "\00a0";
display: block;
overflow: auto;
height: 20px;
left: -10px;
position: relative;
top: 20px;
transform: rotate( 45deg);
-moz-transform: rotate( 45deg);
-ms-transform: rotate( 45deg);
-o-transform: rotate( 45deg);
-webkit-transform: rotate( 45deg);
width: 20px;
}
You can duplicate <div class="group"></div> for each item