<!DOCTYPE html>
<style>
.line { clear:both; }
.fakeColumn { float:left; width:95px; margin-right:10px; }
.wide { width:200px; }
.egg { background:yellow; }
.egg::before { content:"egg"; }
.sausage { background:brown; }
.sausage::before { content:"sausage"; }
.spam { background:hotpink; }
.spam::before { content:"spam"; }
.lobster { background:salmon; }
.lobster::before { content:"lobster"; }
</style>
<p>Below there should be 4 rows of boxes. The boxes on each row should have the same color.
Some boxes are expected to be wider than others.</p>
<div style="line-height:30px;">
<div class="line">
<div class="fakeColumn egg wide"></div>
<div class="fakeColumn egg"></div>
<div class="fakeColumn egg"></div>
<div class="fakeColumn egg"></div>
<div class="fakeColumn egg"></div>
</div>
<div class="line">
<div class="fakeColumn sausage"></div>
<div class="fakeColumn sausage"></div>
<div class="fakeColumn sausage"></div>
<div class="fakeColumn sausage"></div>
<div class="fakeColumn sausage"></div>
<div class="fakeColumn sausage"></div>
</div>
<div class="line">
<div class="fakeColumn spam wide"></div>
<div class="fakeColumn spam"></div>
<div class="fakeColumn spam"></div>
<div class="fakeColumn spam"></div>
<div class="fakeColumn spam"></div>
</div>
<div class="line">
<div class="fakeColumn lobster"></div>
<div class="fakeColumn lobster"></div>
<div class="fakeColumn lobster"></div>
<div class="fakeColumn lobster"></div>
<div class="fakeColumn lobster wide"></div>
</div>
</div>