Div container with text on the left side and overflow image on the right

May 20, 2022

I want to recreate the following structure:

With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.

I tried to do this by grids but things got funky real quick.

>Solution :

go with the flexbox.

.main-container{
  display:flex;
      display: flex;
    justify-content: space-evenly;
  border:1px solid black;
  margin:30px;
  height:300px;
   padding:10px;
}
.image{
  width:50vw;
  position:relative;
}
img{
  width:100%;
  height:150%;
  width: 100%;
    height: 150%;
    top: -50%;
    position: absolute;
}
.text{
  display:flex;
  align-items:center;
}

<div class="main-container">
  <div class="text">
    <p>Somthing Somthing</p>
  </div>
  
  <div class="image">
    <img src="https://loremflickr.com/640/360" />
  </div>
</div>