Make div's below each other - css

Question

I have this React code:
const AddPlace = () => {
return (
<div className="split">
<div className="left">
<AddPlaceCard />
</div>
<div className="right" id="map">
<Map />
</div>
</div>
);
}
for large screens this is my CSS:
.split {
display: flex;
flex-direction: raw;
}
.left {
width: 50%;
}
.right {
width: 50%;
}
Large Screen Image:
Now I want a responsive design for mobile which orders the map below the card, I used this code but it didn't help:
#media screen and (max-width: 1000px) {
.split {
display: flex;
flex-direction: column;
}
.left {
width: 100%;
}
.right {
width: 100%;
}
}
Small Screen Image:

Answer 1

You can get away from explicitly setting widths and just use flex grow:1 for each of the child divs - to see the difference - view the snippet in the small snippet window for the small view - and then click the toggle fullScreen button to see the divs sit side by side.
So to explain the code - in both scenarios = the flex-grow: 1 on the child divs causes it to expand to fill the available space - and because there are two divs - this will cause a 50% / 50% split (same deal if there are 3 divs - they will take up equal thirds of the available space).
So the only difference then between the normal and the media-query is which direction do they grow in. Since the default direction is "row" you do not really even need to include that in the initial styling - I included it to demontrate the point in this snippet.
In flex direction: row: - flex-grow: 1 will cause a horizontal expansiosion and in flex-direction: column - it is a vertical expansion.
Also - note that by applying height: 100% to the html, body, and .split - each div takes the entire height available.
html {
height: 100%;
}
body {
height: 100%;
margin:0
}
.split {
display: flex;
flex-direction: row;
height: 100%;
}
.split div {
flex-grow:1;
padding: 16px
}
.left {
border: solid 1px red;
}
.right {
border: solid 1px blue;
}
#media screen and (max-width: 1000px) {
.split {
flex-direction: column;
}
}
<div class="split">
<div class="left">
<p> This is the div for the placecard</p>
</div>
<div class="right" id="map">
<p> This is the div for the map</p>
</div>
</div>