Css 如何在内联块div中放置div？

我正在尝试这样做：

但当我在红色div中添加一个div时，绿色div向下移动

这是我的代码：

<div style="width:25vw; background-color:red;height:200px;display:inline-block">
         <div style="vertical-align: top">this is the first child div</div>
         <div style="vertical-align: top">this is the second child div</div>
    </div>
     <div style="width:25vw; background-color:green;height:200px;display:inline-block">
        inside div
    </div>

这是第一个儿童组
这是第二个儿童组
内分区

您可以将

float:left

添加到第一个div，它将正确对齐。

我认为这段代码可以工作

表td{
文本对齐：居中；
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
填充：0 15px
}
桌子{
背景：线性梯度（向右，#ff0100 50%，#008004 51%）
}

div
div
div
div
div
div

添加

垂直对齐：顶部到你的绿色分区。红色分区不需要它

这与其他div中的文本行框有关，它会更改文本的基线。老实说，我现在记不起细节了，但这是很平常的事

div之间的间隙是因为元素是内联的，就像文本一样，所以为您创建了“单词之间”的空间。要去掉空格，两个div之间不要有空格。即:

单词<
div>更多单词

或

单词
更多的话

请注意，结束div标记和第二个div标记的开始之间没有空格。
您可以使用带有“左对齐”和“右对齐”的表格格式。您的意思是“显示：表格”吗？好的，我这样做了，现在第一个div和第二个div（红色div内）在同一行中。我希望有第一行1列，第二行2列。这是做什么用的？它如何回答这个问题？不要只是脱口而出代码。解释你自己！这应该是一个评论。这有什么用？它如何回答这个问题？不要只是脱口而出代码。解释你自己！非常感谢。真管用！我不知道线路盒的那个把戏。