使用flexbox和bootstrap对齐div中的元素

Question

这是一个例如

的布局

如何正确对齐左右角的文字并保持其响应？另外我的第一个矩形相对于底部的两个正方形不会粘住。

Here is fiddle

来自jsfiddle的片段

<div class="col-xs-8">
     <div class="rtg vl-align">
          <img class="img" src="http://i.imgur.com/QF5zKn9.png" />
          <div class="left-corner align-self-start">
            <h4 class="h4">Left corner</h4>
          </div>
          <div class="price align-self-end">
            <h4 class="h4-price">250$</h4>
          </div>
     </div>
</div>