title: Squarespace: Make 3 sibling elements have same height always and maintain responsive design
body: <p>I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far.  I am currently working on the site www.thrivetech.com and having an issue.  There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height.  At different screen widths these 3 columns change height and sometimes don't match.  Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine.  I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work.  Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height.  I have even contacted Squarespace support and they haven't come up with a solution.  See image below:</p>
  
  <p><a href="https://i.stack.imgur.com/rRbrW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rRbrW.png" alt="Uneven column height"></a></p>
  
  <p>I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on.  I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution??  Thanks for looking!</p>