title: How do I keep images the same height/width when displaying them in a row in a responsive grid?
body: <p>I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: <a href="http://css-tricks.com/dont-overthink-it-grids/" rel="nofollow">http://css-tricks.com/dont-overthink-it-grids/</a></p>
  
  <p>Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: <a href="http://codepen.io/joshmath/pen/dEuIv" rel="nofollow">http://codepen.io/joshmath/pen/dEuIv</a></p>
  
  <p>Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!</p>