Edit in JSFiddle

$(document).ready(function(){ 
  decorateComments();
});

/* Add the bubble arrow dynamically so that it can be positioned absolutely within the comment box (which has position: relative) */
function decorateComments() {
  $('ul.comments .comment').each(function() {
      $(this).append('<img src="http://strake.blackantmedia.com/thought_bubble.png" alt="Bubble" />');
  });
}
<ul class="comments">
  <li>
    <span class="title">jQuery is a wonderful Javascript library</span>
    <span class="comment">
        Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu.
    </span>
    <p class="byline">
      Submitted by John Z.<br />
      on November 15, 2010 - 3:00pm.
    </p>

    <p class="add-comment">
      <a href="#">Add Comment</a>
    </p>
  </li>
  <li>
    <span class="title">But Zepto is a lighter weight alternative with jQuery syntax</span>
    <span class="comment">
     Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. 
    </span>
    <p class="byline">
      Submitted by gr8jat<br />
      on November 15, 2010 - 10:38am.
    </p>

    <p class="add-comment">
      <a href="#">Add Comment</a>
    </p>
  </li>
  <li>
    <span class="title">Thanks, I'm so much smarter now!</span>
    <span class="comment">
      Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.
    </span>
    <p class="byline">
      Submitted by kevin h.<br />
      on November 15, 2010 - 8:08am.
    </p>

    <p class="add-comment">
      <a href="#">Add Comment</a>
    </p>
  </li>
</ul>
ul.comments li {
  list-style: none;
  padding: 0.9em 0; 
  border-bottom: solid 1px #e4eff9;
}

ul.comments li span.title {
  display: block;
  font-weight: bold;
  color: #000;
  margin-bottom: 0.8em;
}

ul.comments li span.comment {
  position: relative; /* IMPORTANT */
  display: block;
  padding: 0.8em 1em;
  background-color: #f6fafe;
  border: solid 3px #c4e0f5;
  color: #2b3841;
  font-size: 0.95em;
  line-height: 1.3em;
}

ul.comments li span.comment img {
  position: absolute; /* IMPORTANT */
  bottom: -26px;
  right: 12px;
}

ul.comments li:nth-child(even) span.comment img {
  /* flip the bubble arrow and position it on the other side */
  position: absolute;
  left: 12px;
  -webkit-transform: scaleX(-1);
}

ul.comments li:nth-child(even) p.byline,
ul.comments li:nth-child(even) p.add-comment {
  text-align: right;
}

ul.comments li p.byline {
  margin-top: 1.1em;
  margin-bottom: 0;
  font-style: italic;
  font-size: 0.8em;
  color: #86929d;
}

ul.comments li p.add-comment {
  margin-top: 0.6em;
  margin-bottom: 0;
  font-size: 0.8em;
  color: #86929d;
}

ul.comments li p.add-comment a {
  color: #004276;
  text-decoration: none;
  background: transparent url(http://strake.blackantmedia.com/comment_bubble.png) 0 3px no-repeat;
  padding-left: 1.3em;
}