CSS fill remaining container width - css

Question

I have some specific problem with CSS. I was trying to find a solution but I couldn't find this kind of example:
.container {
background: blue;
height: 50px;
}
.nested {
background: red;
width: calc(100vh - 20px);
}
.primary {
background: yellow;
height: 50px;
float: left;
}
.secondary {
background: green;
height: 100%;
float: left;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div>
</div>
<div class="secondary">
wwwwwww
</div>
</div>
I've created a Fiddle with a simple version of the problem:
https://jsfiddle.net/7nwxfgg5/
I want to extend the Green div to fill all of the available Blue container width, but I don't have any idea how I can do that.
EDIT
Removing float: left helped with width, but now I noticed that it doesnt work with height, please check this snippet:
.container {
background: blue;
}
.nested {
background: red;
height: 200px;
width: calc(100vh - 20px);
}
.primary {
background: yellow;
height: 50px;
float: left;
}
.secondary {
background: green;
height: 100%;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div>
</div>
<div class="secondary">
wwwwwww
</div>
</div>
How can I resize green div to the same height as red?

Answer 1

Flex is really hand for layouts. I find float to be more trouble than it's worth so I try to avoid it. It makes building responsive layouts much easier. Here is a good resource to learn more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
background: blue;
height: 50px;
display:flex;
}
.nested {
background: red;
width: 100%;
}
.primary {
background: yellow;
flex:0 0 50%;
}
.secondary {
background: green;
flex:0 0 50%;
}
<div class="container">
<div class="primary">
<div class="nested">
ffffff
</div><!-- nested -->
</div><!-- primary -->
<div class="secondary">
wwwwwww
</div><!-- secondary -->
</div><!-- container -->