Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="wrapper">
            <div class="red" style="height: 210px; width: 50px; float: left;"></div>
        </div>
        <div class="wrapper" style="float: left">
            <div class="blue" style="height: 150px; width: 50px;"></div>
            <div class="blue" style="height: 50px; width: 50px;"></div>
        </div>
        <div class="wrapper" style="float: left">
            <div class="yellow" style="height: 100px; width: 50px;"></div>
            <div class="yellow" style="height: 50px; width: 50px;"></div>
            <div class="yellow" style="height: 50px; width: 50px;"></div>
        </div>
        <div class="wrapper" style="float: left">
                <div class="green" style="height: 50px; width: 50px;"></div>
                <div class="green" style="height: 50px; width: 50px;"></div>
                <div class="green" style="height: 50px; width: 50px;"></div>
                <div class="green" style="height: 50px; width: 50px;"></div>
            </div>
    </div>
</body>
</html>

<style>

    .wrapper >div {
        margin: 10px;
    }

    .red {
        background-color: red;
     }

     .blue {
        background-color: blue;
     }
     .yellow {
         background-color:yellow;
     }
     .green {
         background-color: green;
     }

</style>