html - コンテンツが他の要素に追加されるとhtml要素が移動する

Question

私はかなり長い間この問題を抱えていましたが、それを取り除くことはできません。

相対的な親 div "wrapper" があります "wrapper"
内に絶対 div "tweetHolder" があります "tweetHolder"
内にクラス "tweets" を持つ 2 つの相対div があり
ます。
これらの div が両方とも空の場合、それらは整列されます。一方にコンテンツを追加すると、もう一方が移動します。

JSFiddleへのURL

これはなぜですか、どうすればそれを取り除くことができますか?

ありがとう。

<div id="wrapper">
    <div id="tweetHolder">
        <div class="tweets EHBO">
            <div class="tweet">
                tweet 1
            </div><div class="tweet">
                tweet 2
            </div>
        </div
        ><div class="tweets drukte">
            <div class="tweet">
                tweet 3
            </div><div class="tweet">
                tweet 4
            </div><div class="tweet">
                tweet 5
            </div><div class="tweet">
            tweet 6
        </div>
    </div>          
</div>

#tweetHolder{
    position: absolute;
    top: 100px;
}

.tweets{
    position: relative;
    display: inline-block;
    height: 200px;
    width: 200px;
}