Yo la siguiente estructura HTML

<div id='parent'>
    <div id='child-1'>Some text goes here</div>
    <div id='child-2'>Different text goes here</div>
    <div class='clear'></div>
</div>

Ahora tengo el siguiente css

#parent {
    width: 800px;
    position: relative;
}

#child-1 {
    width: 500px;
    float: left;
}

#child-2 {
    width: 200px;
    float: left;
}

.clear {
    clear: both;
}

Ahora, los contenidos de los divs infantiles (niño-1 yniño-2) podría ser cualquier cosa, por lo que eventualmente el niño 1 podría tener una altura mayor que el niño 2, o el niño 2 podría tener una altura mayor que el niño 1.

Lo que quiero hacer es tener una línea vertical entre child-1 y child-2, y esta línea tiene la longitud del div que es de mayor altura. Probé el borde en ambos divs, (borde derecho para niño-1 y borde izquierdo para div-2), pero esto no es una buena idea, porque la línea aparecerá gruesa donde los dos div se tocan y luego se afinan para la extensión parte.

¿Cómo puedo hacer eso? También me gusta usar CSS solo si es posible, no jQuery ni JavaScript. Si crees que se necesitan divs adicionales, entonces esto está bien.

Gracias.