Ich habe folgende HTML-Struktur

<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>

Jetzt habe ich das folgende CSS

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

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

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

.clear {
    clear: both;
}

Nun ist der Inhalt des Kindes divs (Kind-1 undKind-2) könnte alles sein, also könnte Kind-1 eventuell eine größere Größe als Kind-2 haben, oder Kind-2 könnte eine größere Größe als Kind-1 haben.

Was ich tun möchte, ist eine vertikale Linie zwischen Kind-1 und Kind-2, und diese Linie hat die Länge des Div, das von längerer Höhe ist. Ich habe versucht, beide Divs mit einem Rand zu versehen (rechter Rand für Kind-1 und linker Rand für Div-2), aber das ist keine gute Idee, da die Linie dort dick erscheint, wo sich die beiden Divs berühren, und dann für die erweiterte Linie dünn Teil.

Wie kann ich das machen? Ich benutze auch gerne CSS nur wenn möglich, weder jQuery noch JavaScript. Wenn Sie der Meinung sind, dass zusätzliche Divs benötigt werden, ist dies jedoch in Ordnung.

Vielen Dank.