SOURCE

<!-- margin -->
<div class="wrapper">
  <div class="left float-left width-100 dark">
    <p class="dark">left</p>
  </div>
  
  <div class="right dark-darken ml-100"><p>right</p><p>right</p></div>
</div>


<!-- bfc -->
<div class="wrapper">
  <div class="left float-left width-100 dark">
    <p class="dark">left</p>
  </div>  <div class="left float-left width-100 dark">
    <p class="dark">left</p>
  </div>
  <div class="right dark-darken overflow-hidden"><p>right</p><p>right</p></div>
</div>

<!-- table -->
<div class="wrapper table table-layout-fixed width-percentage-100">
  <div class="left dark table-cell width-100">
left
  </div>
  <div class="right dark-darken table-cell"><p>right</p><p>right</p></div>
</div>

.float-left{
  float: left;
}
.overflow-hidden{
  overflow: hidden;
}
.table{
  display: table;
}
.mr-100{
  margin-right: 100px;
}
.width-100{
  width: 100px;
}
.dark{
  background: #666;
  color: #fff;
}
.dark-darken{
  background: #999;
  color: #fff;
}
.ml-100{
  margin-left: 100px;
}
.table-layout-fixed{
  table-layout: fixed;
}
.width-percentage-100{
  width: 100%;
}
.table-cell{
  display: table-cell;
}
.wrapper{
  margin-bottom: 10px;
}