CSS colspan table

Reliable css colspan for non TD table

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS colspan table</title>
</head>


<body>

<div class="div-table">

    <div class="div-table-row row-1">

        <div class="div-table-cell">Cell 1</div>
        <div class="div-table-cell">Cell 2</div>
        <div class="div-table-cell">Cell 3</div>

    </div>

    <div class="div-table-row row-2">

        <div class="div-table-cell colspan-3">
            Cor blimey he's only gone and done it.
        </div>

    </div>

    <div class="div-table-row row-3">

        <div class="div-table-cell">Cell 1</div>
        <div class="div-table-cell">Cell 2</div>
        <div class="div-table-cell">Cell 3</div>

    </div>

</div>

</body>
</html>

CSS

.div-table-cell,*{
            box-sizing: border-box;
        }
        .div-table{
            display: table;
            border: solid 1px #ccc;
            border-left: none;
            border-bottom: none;
            table-layout: fixed;
            margin: 10px auto;
            width: 50%;
            border-collapse: separate;
            background:#eee;
        }
        .div-table-row{
            display: table-row;
        }
        .div-table-cell{
            display: table-cell;
            padding: 15px;
            border-left: solid 1px #ccc;
            border-bottom: solid 1px #ccc;
            text-align: center;
            background: #ddd;
        }
        .colspan-3{
            width: 300%;
            display: table;
            background: #eee;
        }
        .row-1 .div-table-cell:before{
          content: "row 1: ";
        }
       .row-2 .div-table-cell:before{
          content: "row 2: ";
        }
        .row-3 .div-table-cell:before{
            content: "row 3: ";
            font-weight: bold;
        }
        .div-table-row-at-the-top{
            display: table-header-group;
        }