html - 无法将任何元素添加到一行中的相关 div

Question

我试图在一行中获得两个相对定位的 div，并且代码工作正常，但是当我试图将一些元素添加到其中一个时，它变得一团糟。为什么会这样？如何解决？

* {
  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 然后它工作正常