Pionowa granica między pływającymi DIVami przy użyciu CSS
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.