title: Centering image height on responsive site
body: <p>I have two very simple shapes that I want to try and line up on a responsive site. See the link. <a href="http://bootply.com/94249#" rel="nofollow">http://bootply.com/94249#</a></p>
  
  <p>I want to try and make the smaller shape always sit half way down the right hand edge of the larger shape, It looks like this on larger screens but as soon as the screen width changes it all goes to hell. Any way that I can fix this? </p>
  
  <p>I did try and put the smaller image as a border image in the larger shape but didnt get very good results due to the styling in the larger shape</p>