Как расположить текст справа от от фото?

Question

[buzzloud]

Добрый день всем. Такое впечатление, что вопрос пустяковый, но я зашел в тупик... Казалось бы все проще до не могу - есть фото в div и есть текст (тоже в div). Осталось задать им display: inline-block; и все ок - они будут рядом. Но нет. Уже и в span'ы оборачивал и флоатил - всё мимо. В адаптивном варианте никак не хочет рядом быть. Как можно вылечить?

<div class="news-wrapper">
            <div class="foto">
                <img src="img/face.jpg" alt="face">
            </div>
            <div class="news">
                Как человек, совершенно неожиданно прошедший путь с пересдач английского до широко известного в очень узких кругах переводчика
            </div>
            </div>

Answer 1

[display: block]

.foto{
  float:left;
}

codepen.io/anon/pen/eZQYNo

Comments

[buzzloud]

Спасибо за ответ! Помогло, но навело сразу на еще один вопрос)

[Павел]

buzzloud: вопрос наверно как отступ от фото сделать?)

Answer 2

[Кира]

https://jsfiddle.net/cc1w7agL/

.news-wrapper {
  display: flex;
}

Comments

[buzzloud]

Спасибо!

Answer 3

[buzzloud]

Спасибо всем, но тут снова возникает вопрос: используя float: left; на версии страницы до применения адаптивности получается вот такая история:
Поэтому был использован

.foto, .news {
        display: inline-block;
    }

Почему в первом случае (до адаптивности) inline-block подходит, а во втором варианте только float?