Arrangement of colored blocks

by Ritesh Pandey

HTML

<div class="first-column"></div>
<div class="second-column">
    <div class="green-block"></div>
    <div class="black-block"></div>
    <div class="brown-block-horizontal"></div>
    <div class="clear-both"></div>
    <div class="brown-block-vertical"></div>
</div>
<div class="third-column"></div>

CSS

.clear-both{
    clear: both;
} 
.first-column {
    background-color: red;
    border: 1px solid black;
    width: 100px;
    height: 200px;
    padding: 10px;
    float: left;
}
.second-column {
    width: 100px;
    height: 200px;
    float: left;
    overflow: hidden;
}
.green-block {
    background-color: green;
    width: 100%;
    height: 50px;
}
.black-block{
    background-color: black;
    width: 25px;
    height: 25px;
    float: left;
}
.brown-block-horizontal {
    background-color: brown;
    width: 75px;
    height: 25px;
    float: left;
}
.brown-block-vertical {
    background-color: brown;
    height: 50px;
    width: 100%;
}
.third-column {
    background-color: pink;
    width: 50px;
    height: 25px;
    float: left;
}