Eu a seguinte estrutura 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>

Agora eu tenho o seguinte css

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

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

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

.clear {
    clear: both;
}

Agora, o conteúdo da criança divs (criança-1 ecriança-2poderia ser qualquer coisa, então eventualmente a criança-1 pode ter uma altura maior do que a criança-2, ou a criança-2 pode ter uma altura maior do que a criança-1.

O que eu quero fazer, é ter uma linha vertical entre criança-1 e criança-2, e essa linha tem o comprimento da div que é de maior altura. Eu tentei borda em ambos os divs, (borda direita para criança-1 e borda esquerda para div-2), mas isso não é uma boa idéia, porque a linha aparecerá grossa onde os dois divs tocam uns aos outros e, em seguida, fina para o estendido parte.

Como eu posso fazer isso? Eu também gosto de usar CSS somente se possível, não jQuery nem JavaScript. Se você acha que os extras são necessários, então está tudo bem.

Obrigado.