I następująca struktura 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>

Teraz mam następujące css

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

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

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

.clear {
    clear: both;
}

Teraz zawartość potomnych div (dziecko-1 idziecko-2) może być cokolwiek, więc ostatecznie dziecko-1 może mieć większą wysokość niż dziecko-2, lub dziecko-2 może mieć większy wzrost niż dziecko-1.

Chcę zrobić pionową linię między dzieckiem-1 i dzieckiem-2, a ta linia ma długość div, która ma większą wysokość. Próbowałem obramowania na obu divach (prawa granica dla potomka-1 i lewa granica dla div-2), ale nie jest to dobry pomysł, ponieważ linia będzie gruba, gdy dwa div będą się stykać, a następnie cienkie dla rozszerzonego część.

Jak mogę to zrobić? Lubię też używać CSS, jeśli to możliwe, bez jQuery ani JavaScript. Jeśli uważasz, że potrzebne są dodatkowe divy, to jest w porządku.

Dzięki.