Is there a way to make these neighboring divs the same height, responsive to browser window resizing, and with icons positioned on the corners? This method using display:table-cell works in most browsers but fails in Firefox due to a bug that causes the icons to appear at the bottom of the page. I've been unable to find an alternative solution to maintaining equal heights for these divs.
<div class="contain">
<div class="text-box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
</div>
<div class="text-box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
</div>
</div>
div.contain {
display: table;
margin: 0 auto;
min-width: 200px;
max-width: 1000px;
border-spacing: 20px;
}
.text-box {
display: table-cell;
position: relative;
width: 25%;
background: red;
}
.text-box::before {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 0;
right: 0;
margin-bottom: -10px;
margin-right: -10px;
background: blue;
content: "";
}