How to float one div and stack two divs?

<style type="text/css" rel="stylesheet">
#header {
width: 100%;
}

.floating-container:before,
.floating-container:after {
content: '';
display: table;
clear: both;
}

.left {
float: left;
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
background: rgb(0, 102, 204);
}

.right {
float: right;
width: 50%;
}

.first-row,
.second-row {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
}

.first-row {
background: rgb(102, 0, 204);
}

.second-row {
background: rgb(204, 102, 0);
}
</style>

<div id='header' class='floating-container'>
    <div class='left'>Brand</div>
    <div class='right'>
        <div class='first-row'>First Row</div>
        <div class='second-row'>Second Row</div>
    </div>
</div>


Output :)