css grid or flexbox equal height children on same row - html

Question

I am building a reponsive landing page at the moment that when at full width has 2 boxes that need to match in height, i.e stretch to the tallest. In full width this boxes need to site beside each other, I can get this working with either css grid or flex box as they are on the same row.
When in a mobile size screen the boxes need to wrap beneath each other but still match in height, here is what I have so far.
<div class="welcome-wrapper">
<div class="mt-4 v-card v-sheet theme--light">
<div class="v-card__text text-center">
<p class="headline font-weight-regular text-center my-3">First Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large success" data-v-step="7"><span class="v-btn__content">Do Action One</span></button>
</div>
</div>
<div class="mt-4 v-card v-sheet theme--light">
<div class="v-card__text text-center">
<p class="headline font-weight-regular text-center my-3">Second Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
<button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large" style="background-color: rgb(72, 164, 201); border-color: rgb(72, 164, 201);"><span class="v-btn__content">Do action two</span></button>
</div>
</div>
</div>
.welcome-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
/* flex-wrap: wrap; */
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
flex-direction: row;
justify-content: space-between;
}
.welcome-wrapper .v-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
flex-basis: 100%;
}
.welcome-wrapper .v-card .v-card__text {
height: 100%;
width: 100%;
}
Anyone any advice on how to match to elements height when they are not actually in a row?

Answer 1

Ignoring the bootstrap classes, here it goes.
.welcome-wrapper {
display: flex;
flex-direction: column;
}
#media(min-width:768px) {
.welcome-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.welcome-wrapper .v-card {
background-color: #333;
color: #f0f0f0;
border: 0.05rem solid #eee;
flex: 1 1 0;
padding: 2rem;
}
<div class="welcome-wrapper">
<div class="v-card">
<div>
<p>First Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>
Do Action One
</button>
</div>
</div>
<div class="v-card">
<div>
<p>Second Action Box</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
<button>
Do Action One
</button>
</div>
</div>
</div>