Currently, I am exploring ways to set up a Flexbox configuration with two separate div elements that each occupy half of the screen width equally.
On the left side, there will be text displayed while the right side will showcase an image that will exclusively fill its designated 50% width, adjusting larger images as needed.
I'm in need of guidance on the most effective method to accomplish this task as I am still in the early stages of learning about Flexbox.
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
}<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>