Align Left & Right on same line w/display table

Use table and float to position items on left and right inline, adjusts dynamically.

by Eric Soyke

HTML

<div class="alignedTable">
   <div class="row">
     <div class="cell">Left aligned stuff</div>
     <div class="cell alignRight">Right aligned stuff more right stuff offset</div>
   </div>
</div>

CSS

.alignRight {
    float: right;
}
.alignedTable {
  width: 100%;
  display: table;
}
.alignedTable .row {
  display: table-row;
}
.alignedTable .row .cell {
  vertical-align: middle;
  display: table-cell;
}