Aligning contents of responsive DIVs - html

Question

I'm creating a section on a page that has a centered title in a DIV the same height as the information next to it. I need the background on the outer wrapper so they look as one no matter the orientation. The title doesn't need to be the same height as the information on mobile.
I've used a mess of wrappers which sort of works but this breaks easily and doesn't always scale properly.
.wrap {
width: 100%;
display: table;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col1 {
width: 50%;
float: left;
height: 500px;
}
#media only screen and (max-width: 500px) {
.col1 {
width: 100%;
float: left;
height: 50px;
}
}
.col2 {
width: 50%;
float: left;
height: 500px;
}
#media only screen and (max-width: 500px) {
.col2 {
width: 100%;
float: left;
height: 100px;
}
}
.outer {
width: 100%;
height: 500px;
position: relative;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
}
<div class="wrap">
<div class="col1">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col2">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>
The aim is for the desktop version to look like this;
And for the mobile version to look like this;
There must be a better way to do this, even if I wrapped another DIV inside the title one for the heading? The borders are just to show each col. Any answers would be appreciated. This question follows on from a previous one but isn't asking the same so I've created a new question.

Answer 1

use display flex for your wrap tag instead, and control the flex direction property (default is row):
.wrap {
display: flex;
#media only screen and (max-width: 500px) {
flex-direction: column;
}
}
for the child div you can set flex-grow: 1; to distribute equally the spaces, plus you can easily center your content with display flex as well like:
.child {
flex-grow: 1; // this property is set on display flex element's child
// below how to center content with display flex
display: flex;
justify-content: center;
align-items: center;
}
more about it: css flex
you can check an example here at codepen