Alignment image - html

Question

I'm working on a site which needs an image centered in the div on the left side, centered off the right div with a background.
I tried to a common solution, but for some reason, it won't work. It must be responsive as well, so I'm a bit in the dark over here. See my fiddle for the example.
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6">
<div class="leftSide">
<img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="rightSide">
<h3>
Some text
</h3>
<p>
Some more text
</p>
<button type="button" class="btn btn-primary">Some text</button>
</div>
</div>
https://jsfiddle.net/Onno0297/grvwxby2/1/

Answer 1

If I understand your question correctly then below code will work.
Visit https://jsfiddle.net/alishapatel/n3ap1vjo/4/!
.leftSide {
height: 100%;
display: flex;
align-items: center;
}
.rightSide {
background: #313131;
height: 546px;
color: #fff;
}
.rightSide h3 {
text-align: center;
padding-top: 200px;
}
.rightSide p {
text-align: center;
}
.btn.btn-primary {
margin: 0 auto;
display: block;
}
.imgLeft {
max-height: 400px;
max-width: 300px;
margin: 0 auto;
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6">
<div class="leftSide">
<img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="rightSide">
<h3>
Some text
</h3>
<p>
Some more text
</p>
<button type="button" class="btn btn-primary">Some text</button>
</div>
</div>
</div>
</div>