unir dos o mas bloques con linea vertical

[NSD]

Hola gente, me encuentro ante un problema que no logro resolver, tengo que maquetear esto:

el html que tengo es este:

Código HTML:

<!-- En el caso de la imagen que puse, este seria el html -->
<section id="publicaciones">
    <div class="mensaje rosa">
        <div class="icono linea abajo"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
    <div class="mensaje celeste">
        <div class="icono linea arriba"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
</section>
 
<!-- Pero tambien podria tener cosas como esta donde la linea negra debe aparecer tanto arriba como abajo  -->
<section id="publicaciones">
    <div class="mensaje rosa">
        <div class="icono linea abajo"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
    <div class="mensaje celeste">
        <div class="icono linea arriba abajo"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
    <div class="mensaje celeste">
        <div class="icono linea arriba"></div>
        <img src="#" class="avatar">
        <div class="mensaje">
        </div>
    </div>
</section>
 

El tema de las imagenes y eso se resolverlo, lo que no se como hacer es la linea esa que une los dos div que en algunos div puede estar abajo, en otros arriba o en ambos y ademas tiene que tener el circulito ese.

pense en usar 3 background-image pero quizas exista una solucion mas elegante.

a alguien se le ocurre como resolverlo? cada bloque tiene alto variable