HTML/CSS 表格强制单元格对齐，然后自定义单元格宽度

图片说明
如图表格，我希望实现红色的地方，但是自己做的老是会强制与蓝色的地方对齐，不能自由的选择红色地方单元格的位置，请问该如何实现？可以举个例子就好了

你这个看上去是一个个单元格，实际上可以看做是由多个单元格合并而成，通过不同的合并数，实现这种效果。
比如第一行第一列这种宽度是两个单元格合并，第二行第一列是一个单元格，第二行第二列是三个单元格合并

<!doctype html>
<html lang="zh-cn">
    <head>
        <style>
            table{
                background-color:#fff;
                width:300px;
                height:300px;
                border:1px solid #000;
            }
            tbody{
                width:100%;
            }
            table,tbody,td{
                box-sizing:border-box;
                display: block;
            }
            tr{
                box-sizing:border-box;
                display: flex;
                justify-content: space-between;
                border-bottom:1px solid #000;
                width:100%;
                height:100px;
            }
            td{
                flex:0 0 calc(100%/3);
                height:100px;
                line-height: 100px;
                border-right: 1px solid #000;
            }
            td:nth-last-child(1){
                border:none;
            }
            tr:nth-last-child(1){
                border:none;
            }
            tr:nth-child(2) td:nth-child(1){
                flex:0 0 16.5%;
            }
            tr:nth-child(2) td:nth-child(2){
                flex:0 0 calc(200%/3 - 16.5%);
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>123</td>
                <td>234</td>
                <td>345</td>
            </tr>
            <tr>
                <td>123</td>
                <td>234</td>
                <td>345</td>
            </tr>
            <tr>
                <td>123</td>
                <td>234</td>
                <td>345</td>
            </tr>
        </table>
    </body>
</html>