How to make a floated div vertically aligned relative to height of its container
===

I'm trying to vertically align a floated div that's inside a parent div.  Since the parent div can contain a varying amount of content, I'd like it to be vertically aligned vs. having to set a fixed margin-top on the floated div.  Live example here, where the right arrow you see is in the upper right corner of the gray div but I want it to be vertically centered http://jsbin.com/oriqow/1/

**CSS:**

    .item { vertical-align:middle; border: 1px solid #999; padding: 10px; background: #e6e6e6; border-radius: 4px; }
    .item > div:not(.arrow) { margin-bottom:10px; }
    .arrow { float: right; }

**HTML:**

    <div class="item">
      <div class="arrow">▶</div>
      <div>Title</div>
      <div>Sub title</div>
      <div>Another potential element here</div>
      <div>And another</div>
    </div>
