It makes a huge difference to add in that semi colon. The images go from bottom to top.
I’d like some more info about the layout you really want to suggest alternatives, but flexbox isn’t needed for a layout like what you showed in your screen shot. You can make up a working example for us to look at, including images. Take a look at this thread for guidance on that:
It doesn’t work in Mozilla as it only has partial support for flexbox according to caniuse
What would you suggest I use to achieve the desired result? (if not a flexbox)?
For the time being I’d use display table (IE8+) for the equal columns. The problem is the button at the bottom of each column and you’d need to do it (rather non-semantically in two rows as follows).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
width:70%;
margin:auto;
table-layout:fixed;
border-spacing:20px 0;
}
.row { display:table-row }
.item {
display:table-cell;
border:5px solid #000;
padding:10px;
}
.item.top {
border-bottom:none;
border-radius:10px 10px 0 0
}
.item.bottom {
border-top:none;
border-radius:0 0 10px 10px
}
button {
width:50%;
height:30px;
line-height:30px;
border-radius:5px;
border:1px solid #000;
padding:0;
text-transform:uppercase;
background:red;
margin:auto;
display:block;
}
</style>
</head>
<body>
<h1>Equal columns IE8+</h1>
<div class="wrap">
<div class="row">
<div class="item top">
<h2>Heading</h2>
<p>Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text </p>
</div>
<div class="item top">
<h2>Heading</h2>
<p>Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text </p>
<p>Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text </p>
</div>
</div>
<div class="row">
<p class="item bottom">
<button>Buy now</button>
</p>
<p class="item bottom">
<button>Buy now</button>
</p>
</div>
</div>
</body>
</html>