Having trouble placing 2 divs side by side in wrapper

I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!

Any help would be appreciated, thank you! :)

Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/

HTML:

<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>

CSS:

.child1 {
background:#082a46;
margin:0;
}

.wrapper {
width:970px;
margin: 0 auto;
}

.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}

.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}