How to set an image vertical align but align left horizontally? - html

Question

I need to set a welcome section like the following:
I have set an absolute position just for the image, but I cannot make the image keeps horizontally align with the other column. Any ideas?
My code:
.img-welcome{
position: absolute;
top:10%;
right: 0;
bottom: 0;
margin: auto;
align-items: center;
display: flex;
height: max-content;
}
.container-relative{
position: relative;
height: 100%;
padding-bottom: 50px;
}
<div className='welcome-container d-flex align-items-center'>
<div className='container'>
<div className='pt-5 text-left pb-5 container-relative'>
<div class="col-6 pt-5 mb-5">
<h1 class="mb-3 row h1-text-style">Combine all your credit cards in one place</h1>
<h3 class="mb-5 row h3-text-style">We alow you to connect diferent bank cards, in one system, in which you will have the opportunity to manage to financial data and track the statistics of your costs.</h3>
<a class="button-gradient" href="#">Get Started</a>
</div>
</div>
</div>
<div class="img-welcome">
<img className='w-100' src={require('./img/img2.png')}></img>
</div>
</div>

Answer 1

You can use flexbox to easily achieve this.
You just need a container and the two sides:
body {
background-image: linear-gradient(to right, #00b795 , #0092a2);
height: 100vh;
margin: 0;
padding: 0;
}
.container {
height: 100%;
display: flex;
align-items: center;
}
.container > div {
flex: 50%;
}
.left {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
color: white;
display: flex;
flex-direction: column;
}
.right img {
height: 80vh;
width: 100%;
}
<div class="container">
<div class="left">
<strong>Combine all your credit cards in one place</strong>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum architecto repellendus deserunt ex quo impedit in blanditiis facere, nisi quos, excepturi doloribus fuga expedita amet.</p>
</div>
<div class="right">
<img src="https://startbootstrap.com/assets/img/screenshots/themes/sb-admin-2.png">
</div>
</div>