I need to make two .tinted-container
s the same height as each other (using CSS if possible) but each one is under a grid column.
- I can't tint the grid columns because they use padding to create the gutters and I'd have no white space between the tinted containers if I tint the background.
- It's a %-based grid so adding a margin to both columns takes the width to over 100%.
<div class="grid-row">
<div class="grid-column-half">
<div class="tinted-container">
<p>Taller</p>
<p>column</p>
<p>on</p>
<p>left</p>
</div>
</div>
<div class="grid-column-half">
<div class="tinted-container">
<p>This container should be the same height as the other one.</p>
</div>
</div>
</div>
How can I make the containers the same height?