How to properly size images within a div using flexbox? - html

Question

this is how I want the final organization to lookI have two images and some text, I cannot sort out how to properly situate them so that the image on the left is smaller and also so that the entire div moves with my page when it's scaled up and down
HTML:
<div class="container">
<!-- ------------------------------ Section 1 ------------------------------ -->
<section class="sec-1">
<img class="img-1" src="./images/image-1.jpeg" alt="blue van driving on a highway at the base of a mountain.">
<div class="feature-box-1">
<img class="img-2" src="./images/image-2.jpeg" alt= "small row boat, aerial view, large body of water.">
<h4>FEATURE</h4>
<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
<a class="button" href="#">read more</a>
</div>
</section>
CSS:
/* -------------------------------- Section 1 ------------------------------- */
.container {
margin: 0 auto;
max-width: 1100px;
width: 85%;
}
.sec-1 {
border: 5px solid red;
display: flex;
margin-top: 125px;
margin-bottom: 25px;
}
.feature-box-1 {
background:#F6F8FA;
margin-left: 35px;
text-align: center;
}
.img-1 {
max-height: 650px;
height: 100%;
}
.img-2 {
width: 100%;
height: auto;
}
.sec-1 h4 {
color: #777777;
}
.sec-1 h2 {
font-size: 39px;
}

Answer 1

You just need to put them in containers for example .aside-left .aside-right and inside .aside-right you can add container .top and .bottom
<style>
/* -------------------------------- Section 1 ------------------------------- */
.container {
display: flex;
width: 70%;
margin: auto;
height: 600px;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.aside-left {
display: flex;
width: 30%;
height: 100%;
}
.aside-right {
margin-left: 2%;
width: 68%;
height: 100%;
border: 1px solid red;
}
.aside-left img {
width: 100%;
height: 100%;
}
.aside-right .top {
width: 100%;
height: 45%;
}
.aside-right .bottom {
width: 100%;
height: 55%;
}
.sec-1 h4 {
color: #777777;
}
.sec-1 h2 {
font-size: 39px;
}
</style>
<div class="container">
<!-- ------------------------------ Section 1 ------------------------------ -->
<section class="aside-left">
<img class="img-1" src="" alt="blue van driving on a highway at the base of a mountain.">
</section>
<section class="aside-right">
<div class="top">
<img class="img-2" src="./images/image-2.jpeg" alt="small row boat, aerial view, large body of water.">
</div>
<div class="bottom">
<h4>FEATURE</h4>
<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
<a class="button" href="#">read more</a>
</div>
</section>
</div>