SOURCE

<div class="wrapper">
  <div class="left item item-left">left</div>
  <div class="right item item-right">right</div>
</div>

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.left{float:left}
.right{float:right}
.item{
  width:50%;
  text-align:center;
	line-height:60px;
  color:black;
  border:1px solid blue;
  box-sizing:border-box;
}
.wrapper{
  border:10px solid red;
}
.item-bottom{
  width:100%;
  background:blue;
}