how to place two divs side by side - html

Question

How can I place 2 divs side by side, both which have images. I want the divs to remain side by side and the images auto size ,with screen size.When I reduce the size of the screen the images re-position themselves one below the other.
How will be the css for the below html?
<div class="container">
<div class="wrapper">
<div class="left">
<img src="img1.png" />
</div>
<div class="right">
<img src="img2.png" />
</div>
</div>
</div>

Answer 1

You can use css float to get contained elements to sit either side
.container {
width: 100%;
}
.left, .right {
width: 50%;
float: left;
}
<div class="container">
<div class="left"><img src='http://placehold.it/350x150'/></div>
<div class="right"><img src='http://placehold.it/350x150'/></div>
</div>
Edit: You can use Flex-Box
.container {
width: 100vw;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.container > img {
align-self: auto;
margin: 4px;
}
<div class="container">
<img src='http://placehold.it/350x150'/>
<img src='http://placehold.it/350x150'/>
</div>

Answer 2

Try using bootstrap grid's. It can be something like this.
<div class="col-sm-12">
<div class="col-sm-6">
<img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
</div>
<div class="col-sm-6">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">
</div>
</div>
Demo