Position image left of Bootstrap container - html

Question

I'm trying to build a simple web page and I need an image to be positioned on the left of the container. Ideally I'd like to make sure the image resize nicely when the browser window is resized but still keeps its position independently from the text. What I'm trying to achieve looks something like this:
The text part is inside the Bootstrap container CSS class. Not sure how to achieve the look I need - tried a few things with image being inside a wrapper with absolute position on the same level as the container div, but then I can't seem to center the image inside the wrapper (vertically).
This is what I have so far:
.header {
background-color: #333333;
}
.logo-wrapper {
position: absolute;
}
.logo {
position: relative;
/* padding-top: 50%; */
height: 100%;
}
<div class="header">
<div class="logo-wrapper">
<img src="assets/logo.png" class="logo">
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
<h2> Integer vitae tortor id elit pharetra dignissim</h2>
</div>
</div>
</div>

Answer 1

.logo-wrapper {
width: 20%;
display: table-cell;
vertical-align: middle;
}
.logo-wrapper img{
max-width:100%
}
.container{
width:80%;
display: table-cell;
}
<div class="header">
<div class="logo-wrapper">
<img src="https://pixabay.com/static/uploads/photo/2015/03/04/22/35/head-659652_640.png" class="logo">
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
<h2> Integer vitae tortor id elit pharetra dignissim</h2>
</div>
</div>
</div>

Answer 2

.header {
background-color: #333333;
line-height:1.5em;
display:inline;
}
.container{
float:right;
width:70%;
padding-left:10%;
}
.logo-wrapper {
float:left;
width:20%;
}
.logo-wrapper img{
max-width:100%
}
}
.logo {
position: relative;
/* padding-top: 50%; */
height: 100%;
}
<div class="header">
<div class="logo-wrapper">
<img src="https://pixabay.com/static/uploads/photo/2015/03/04/22/35/head-659652_640.png" class="logo">
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
<h2> Integer vitae tortor id elit pharetra dignissim</h2>
</div>
</div>
</div>
I think the answer of #Mitul is correct. But there's a slight modification in the solution of Mitul. If you want no text below the image, you should modify it like.