Is it possible in this scenario to automatically adjust the row height for
<span class="orange">ORANGE</span><span> elements, can the cell be split to accommodate varying heights?
(You can use: display: table, table-row, table-cell, or a traditional HTML table)
<html>
<head>
<style>
.table {
display: table;
background: #eee;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #000;
}
.cell span {
display: block;
}
.cell span.red {
background: red;
}
.cell span.yellow {
background: yellow;
}
.cell span.green {
background: green;
}
.cell span.orange {
background: orange;
}
.cell span.grey {
background: grey;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
</div>
<div class="row">
<div class="cell">Row 1</div>
<div class="cell">Row 1</div>
<div class="cell">Row 1</div>
<div class="cell">Row 1</div>
</div>
<div class="row">
<div class="cell">
<span class="red">RED</span>
<span class="yellow">YELLOW</span>
<span class="green">GREEN</span>
<span class="orange">ORANGE</span>
<span class="grey">GREY</span>
</div>
<div class="cell">Row 2</div>
<div class="cell">Row 2</div>
<div class="cell">
<span class="orange">ORANGE</span>
</div>
</div>
<div class="row">
<div class="cell">
<span class="red">RED</span>
<span class="yellow">YELLOW</span>
<span class="green">GREEN</span>
<span class="orange">ORANGE</span>
<span class="grey">GREY</span>
</div>
<div class="cell">Row 2</div>
<div class="cell">Row 2</div>
<div class="cell">
<span class="green">GREEN</span>
<span class="orange">ORANGE</span>
</div>
</div>
</div>
</body>
</html>