1つの行にある相対divに要素を追加できません

Question

2つの相対位置指定divを1行で取得しようとしていますが、コードはうまく動作しますが、試してみると大きな混乱につながりますそれらの1つにいくつかの要素を追加します。なぜそれが起こっているのですか？それを修正するには？

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.parent { 
 
    white-space: nowrap; 
 
    font-family: Arial; 
 
    color: #222; 
 
    letter-spacing: 1px; 
 
} 
 

 
.kiddo { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 20vh; 
 
    display: inline-block; 
 
} 
 

 
.first { 
 
    background: pink; 
 
} 
 

 
.second { 
 
    background: skyblue; 
 
}

<div class="parent"> 
 
    <div class="kiddo first"> 
 
    <!-- divs are in one line only when they doesn't contain any elements --> 
 
    <p> 
 
     Lorem ipsum dolor sit amet 
 
    </p> 
 
    </div><!-- 
 
    --><div class="kiddo second"></div> 
 
</div>

Answer 1

float:left.kiddoを適用、それはあなたの段落は、その要素の高さに追加され