EQ mockup

by sambaldwin

HTML

<div class="row">
    <div class="cell date">
        <p>Jun</p>
    </div>
    <div class="cell">
        <p>Qualification year</p>
    </div>
    <div class="cell">
        <p>Deadline</p>
    </div>
</div>
<div class="row">
    <div class="cell date">
        <p>Jul</p>
    </div>
    <div class="cell phase2">
        <p>Qualification year</p>
    </div>
    <div class="cell phase3">
        <p>Deadline</p>
    </div>
</div>
<div class="row">
    <div class="cell date">
        <p>Aug</p>
    </div>
    <div class="cell full phase3">
        <p>Qualification year</p>
    </div>
</div>

CSS

* {
    box-sizing:border-box;
    font-family:MetaPro;
    margin:0;
    padding:0;
}

body {
    padding:1em;
}

.row {
    width:100%;
    clear:both;
    border-bottom:1px solid grey;
    margin:1em 0;
}
.row:after {
    content:" ";
    clear:both;
    display:table;
}

.cell {
    width:45%;
    float:left;
    padding:0.5em;
}

.cell:not(.date):before {
    content:"Phase 1";
    font-size:70%;
}

.cell.date {
    width:10%;
    text-transform:uppercase;
}

.cell.full {
    width:90%;
}

.cell.phase2 {
    background:skyblue;
}
.cell.phase3 {
    background:tomato;
}