flexbox container two divs responsive - css

Question

How I can make responsive flexbox?
So I use flexbox and two divs, one for leftside and one for right side.
Screen is like splitted, left side is image and right side info and inputs.
But left side isn't responsive if ajax loads more data, then white space is coming under the image.
My HTML:
<div class="forny-container">
<div class="forny-inner">
<div class="forny-two-pane">
<div></div> <!-- form div -->
<div></div> <!-- image div -->
</div>
</div>
</div>
My CSS:
.fo-container {
display: block;
align-items: center;
height:100%;
}
.fo-inner {
display: block;
height: 100%;
width: 100%;
}
.fo-two-pane {
height: 100%;
display: flex;
flex-direction: row-reverse;
}
.fo-two-pane > div {
flex: 1;
}
.fo-two-pane > div:first-child {
display: flex;
align-items: center;
background: white;
}
.fo-two-pane > div:last-child {
background: url('http://getwallpapers.com/wallpaper/full/9/9/0/722477-best-barber-wallpapers-1920x1080-samsung-galaxy.jpg') center center no-repeat
hsla(31, 80%, 93%, 1);
display: none;
}
If ajax loads more data or error messages into form div then white space is coming under the image:
What is going wrong?

Answer 1

I guess this should solve your problem. Here the working code.
.flex-container {
display: flex;
}
.image-selector {
width: 50%;
}
.left {
flex: 1;
background: lightblue;
text-align: center;
}
.right {
flex: 1;
background: lightpink;
}
.right h1 {
text-align: center;
}
.content {
margin-left: 20px;
}
<div class="flex-container">
<div class="left">
<h1>Left</h1>
<img class="image-selector" src="https://agentpekka.com/wp-content/uploads/2018/11/AP_MVM_Apple_2x-640x854.jpg" alt="image">
</div>
<div class="right">
<h1>Right</h1>
<div class="content">
<h2>Heading</h2>
<h3>Subheading</h3>
<h4>Somecontent</h4>
<lable>Name:</lable>
<input type="text" placeholder="name">
<p>description goes here, some more content</p>
</div>
</div>
</div>
Click for Codepen link
Additionally, you will need to use Media Queries for handling different screen sizes and different view ports.