Я следующую структуру 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>

Теперь у меня есть следующий CSS

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

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

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

.clear {
    clear: both;
}

Теперь содержимое дочернего элемента div (ребенок-1 а такжеребенок-2) может быть чем угодно, поэтому со временем child-1 может иметь больший рост, чем child-2, либо child-2 может иметь больший рост, чем child-1.

Я хочу сделать вертикальную линию между child-1 и child-2, и эта строка имеет длину div, которая больше высоты. Я пробовал границу для обоих элементов div (правая граница для child-1 и левая граница для div-2), но это не очень хорошая идея, потому что линия будет выглядеть толстой, когда два div касаются друг друга, а затем тонкой для расширенного часть.

Как я могу это сделать? Мне также нравится использовать CSS только, если это возможно, без jQuery и JavaScript. Если вы думаете, что нужны дополнительные div, тогда это нормально.

Благодарю.