Q:

'Float' right a column when using display: table?

Im using display table for a 3 column section of my site. Im doing this as I need to vertically center the content of the first column.   
How can I move the third column to the right while still keeping its text left aligned?  

<span class="cont">
  <span class="one">One</span>
  <span class="two">One</span>
  <span class="three">
    <div class="a">Some text and A</div>
    <div class="b">Some more text and B</div>
  </span>
</span>

.cont {
  display: table;
  border: 1px solid black;
  width: 100%;
}
.one,
.two,
.three {
  display: table-cell;
}
.one {
  background: grey;
  vertical-align: middle;
}
.two {
  background: green;
}

http://codepen.io/anon/pen/azbmrP

A:

One simple solution is to use float: right to .three class and vertical-align: top to .two class:

.cont {
  display: table;
  border: 1px solid black;
  width: 100%;
}
.one,
.two,
.three {
  display: table-cell;
}
.one {
  background: grey;
  vertical-align: middle;
}
.two {
  background: green;
  vertical-align: top;
}
.three {
  float: right;
}
<span class="cont">
  <span class="one">One</span>
<span class="two">One</span>
<span class="three">
    <div class="a">Some text and A</div>
    <div class="b">Some more text and B</div>
  </span>
</span>

A:

Use 
.three
{
  float:right;

}

http://codepen.io/anon/pen/raNMXr

