Image disappearing when adding position relative - html

Question

I am using ReactJS. This is the Page component part
<div className="animated main">
<div className="title text">Lorem ipsum dolor sit amet consectetur </div>
<div className="image"></div>
</div>
And this is the page.css component
*{
box-sizing: border-box;
}
.main{
display: flex;
flex-wrap: wrap;
height: fit-content;
}
.title{
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
text-align: left;
font-size: 4em;
font-weight: bold;
padding: 5%;
}
.image{
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
background-image: url(../images/image1.png);
background-repeat: no-repeat;
border: 1px solid black;
position: absolute ;
}
* {
box-sizing: border-box;
}
.main {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
.title {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
text-align: left;
font-size: 4em;
font-weight: bold;
padding: 5%;
}
.image {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
background-image: url(../images/image1.png);
background-repeat: no-repeat;
border: 1px solid black;
position: absolute;
}
<div class="animated main">
<div class="title text">Lorem ipsum dolor sit amet consectetur </div>
<div class="image"></div>
</div>
I am trying to position the image of the right side of the screen but it disappears whenever i add the position : relative / absolute feature.