Way to place two elements in single div like this - html

Question

I want to place two divs side by side with the webpage being responsive.
I implemented it using two divs similar to bootstraps col-md-6. but there must be a simpler way using class=btn. any kind of solution is welcomed.
JSbin
HTML:
<div class="cont">
<div class="btn blue"></div>
</div>
<div class="cont">
<div class="btn red"></div>
</div>
CSS:
.cont{
display:inline-block;
width:50%;
height:100px;
background:#eee;
padding:10px 5px;
box-sizing:border-box;
}
.btn{
width:100px;
height:80px;
}
.red{
background:red;
float:left;
}
.blue{
background:blue;
float:right;
}

Answer 1

Take a look at display: flex e.g. at http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think it is exactly what you are looking for.

Answer 2

Try this:
.cont{
margin: 0 auto; // added
display:inline-block;
width:50%;
height:100px;
background:#eee;
padding:10px 5px;
box-sizing:border-box;
}
Other Example:
<div class="wrapper" style="margin: 0 auto; width: 200px">
<div class="inner1" style="width: 100px; float:left;"></div>
<div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>

Answer 3

So is this what you mean?
HTML
<div class="cont">
<div class="btn blue"></div>
<div class="btn red"></div>
</div>
CSS
.cont{
margin: 0 auto; // added from desparado
width:50%;
height:100px;
background:#eee;
padding:10px 5px;
box-sizing:border-box;
}
.btn{
width:100px;
height:80px;
}
.red{
background:red;
float:left;
}
.blue{
background:blue;
float:right;
}
You can swap out margin auto for inline-block and play around by wrapping in an additional container.
Since you are giving a specific width to your buttons - by setting a width to your container and using margin width set to auto, I believe you get what you are looking for.