Html 如何使显示内联块仅用于flex中的两个元素？

我试图在flex容器中创建两个元素作为显示内联块元素。但它不起作用。下面是我的html代码

<div id="main-container">
    <div id="col1">
    first
    </div>
    <div id="col2">
    second
    </div>
    <div id="col3">
    third
    </div>
    <div id="col4">
    fourth
    </div>
</div>

在这里，我试图将col2和col3作为一行。怎么做。？就像下面的例子

----
First
-------------
Second | thrid
--------------
fourth
-----

实际上，我正在尝试使用mat table，我无法在两个单元格之间添加任何div。为了演示，我用div标签提出了这个问题。我需要将红色高亮度单元格合并为一行

您的

#主容器

具有

弹性方向：列

，因此

div的

显示为列

有必要添加一个容器，只需为其应用

display:flex

。默认情况下，

display:flex

具有

flex-direction:row

：

#主容器{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
填充：8px 24px；
}
#可乐{
背景：蓝色；
显示器：flex；
对齐项目：居中；
溢出：隐藏；
单词包装：打断单词；
最小高度：继承；
}
#可乐{
背景：黄色；
对齐项目：居中；
溢出：隐藏；
单词包装：打断单词；
最小高度：继承；
显示：内联块；
}
#可乐{
背景：绿色；
弹性：1；
显示：内联块；
最小高度：继承；
}
#可乐{
背景：靛蓝；
弹性：1；
显示器：flex；
对齐项目：居中；
溢出：隐藏；
单词包装：打断单词；
最小高度：继承；
}
傅先生{
显示器：flex；
}

第一
第二
第三
第四

谢谢您的回答。实际上，我正在尝试使用mat table，我无法在两个单元格之间添加任何div。出于演示目的，我用div标记提出了这个问题。@mkHun您可以创建吗？我创建了（@mkHun it said error

在ng material v1兼容模式中不能使用“mat-”前缀。它用于“mat table”元素。

@mkHun请查看我的更新答案

----
First
-------------
Second | thrid
--------------
fourth
-----