Need help creating a table. Div - html

Question

Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>

Answer 1

Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>