SOURCE

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

<div class="wrapper monowidth-parent">
  <div class="float-left width-percentage-25 height-100 dark">1</div>
  <div class="float-left width-percentage-25 height-100 dark-darken">2</div>
  <div class="float-left width-percentage-25 height-100 dark">3</div>
  <div class="float-left width-percentage-25 height-100 dark-darken">4</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;
} 
.width-zero{
  width: 0.1%;
}
.width-percentage-25{
  width: 25%;
}
.height-100{
  height: 100px;
}
.inline-block{
  display: inline-block;
}
.monowidth-parent{
  margin-right: 0;
  margin-left: -20px;
}
.monowidth-parent>div{
  box-sizing: border-box;
  padding-left: 20px;
  background-clip: content-box;
}