Flex-Box height, not equal when scaling page - css

Question

I have an issue with flexbox, where the 2 flex boxes side by side, do not share an equal height when scaling the page. I'll include a picture below, but one box contains a react-bootstrap carousel, while the other contains text. How do I keep them at the same height so that they will scale on all screen sizes?
Here is the JSX
<div className={styles.floatchild1}>
<Carousel fade className={styles.viewMap}>
<Carousel.Item>
<img
className="d-block w-100"
src="/open.jpeg"
alt="Front View of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/inside.jpeg"
alt="Inside of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/side-view-container.jpeg"
alt="Side View of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
</Carousel>
<Button
className={styles.viewMapButton}
href="https://www.google.com/maps/place/2487+Commerce+Blvd,+Grand+Junction,+CO+81505/#39.0906152,-108.5944703,17z/data=!3m1!4b1!4m5!3m4!1s0x87471d18f2c3486b:0xe36fb2de2017f121!8m2!3d39.0906111!4d-108.5922816"
target="_blank"
>
+ View Map
</Button>
<div className={styles.buttonIdRow}>
<p></p>
<a>Jump to:</a>
Units
</div>
</div>
<div className={styles.floatchild2}>
<p>
Self Storage in <u>Grand Junction</u>, Co
</p>
<h2 className={styles.hicoLogo}>
<b>
<u>HICO Storage Company</u>
</b>
</h2>
<div className={styles.addressPhone}>
<h3 className={styles.address}>
<div className={styles.pinPicture}>
<Image
src="/pin.png"
alt="location pin"
width={20}
height={28}
/>{" "}
</div>
<div className={styles.location}>
2487 Commerce Blvd, Grand Junction, CO 81505
</div>
</h3>
<h3 className={styles.phoneWrapper}>
<div className={styles.phonePicture}>
<Image
src="/phone.png"
alt="location pin"
width={25}
height={25}
/>{" "}
</div>
<div className={styles.phone}>
<a className={styles.phoneColor} href="tel:[phone]">
<b>808-896-2272</b>
</a>
</div>
</h3>
</div>
<hr />
<div className={styles.hours}>
<div className={styles.officeHours}>
<p className={styles.TimeTitle}>Office Hours</p>
<p className={styles.TimeP}>
8:30am - 5:30pm Monday - Saturday
</p>
<p className={styles.TimeP}>10:30am - 3:30pm Sunday</p>
</div>
<div className={styles.officeHours}>
<p className={styles.TimeTitle}>Gate Hours</p>
<p className={styles.TimeP}>24/7 access</p>
</div>
</div>
<hr />
<Button href='/contact' className={styles.interestedButton}>Interested? Contact Us</Button>
</div>
</div>
And here is the CSS I'm using to style it
.wrapper {
overflow: hidden;
min-width: 300px;
display: flex;
flex-direction: row;
width: 90%;
font-family: 'southern';
align-items: center;
}
.floatchild1{
background: white;
flex:1;
min-width: 380px;
align-items: center;
}
.floatchild2 {
background: white;
flex:1;
min-width: 380px;
align-items: center;
padding: 4%;
}

Answer 1

Just change
align-items: center;
at .wrapper to
align-items: stretch;
Working codepen: https://codepen.io/maty1000/pen/oNEqvGY