Позиция изображения слева от контейнера Bootstrap

Question

Я пытаюсь создать простую веб-страницу, и мне нужно изображение, которое будет расположено слева от контейнера. В идеале я хотел бы убедиться, что изображение сильно изменится при изменении размера окна браузера, но сохраняет свою позицию независимо от текста. То, что я пытаюсь добиться будет выглядеть примерно так:

Текст часть находится внутри контейнера класса CSS Bootstrap. Не уверен, как добиться нужного мне вида - попробовал несколько вещей с изображением, находящимся внутри обертки с абсолютным положением на том же уровне, что и контейнер div, но тогда я не могу сосредоточиться на изображении внутри обертки (по вертикали).

Это то, что я до сих пор:

.header { 
 
\t background-color: #333333; 
 
} 
 

 
.logo-wrapper { 
 
\t 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 { 
 
\t  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 { 
 
\t background-color: #333333; 
 
    line-height:1.5em; 
 
    display:inline; 
 
} 
 
.container{ 
 
float:right; 
 
    width:70%; 
 
    padding-left:10%; 
 
} 
 
.logo-wrapper { 
 
\t 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>

Я думаю, что ответ @Mitul правильный. Но есть небольшое изменение в решении Митула. Если вам не нужен текст под изображением, вы должны его изменить.