CSS Позиционирование - Div в строке встроенного блока Спрыгивание вниз

Question

Я создал this JSFiddle, чтобы проиллюстрировать, как я хочу, чтобы встроенные блоки выстраивались в линию.

<div class="entry"> 
    <div class="title">Hello</div> 
    <div class="divider">&nbsp;</div> 
    <div class="content">This is some content that goes down to the next level when it should actually stay in the same place, just create a new line right below where it was supposed to start.</div> 
</div> 

.entry { 
    margin-bottom: 40px; 
    div { 
    display: inline-block; 
    } 
    .divider { 
    width: 0; 
    border-left:1px black solid; 
    } 
} 

В третьем примере JSFiddle, когда текст переполняется, он создает новую линию весь путь слева от родительского DIV, когда я ожидал его, чтобы начать прямо под себя.

Что мне здесь не хватает?

Update

После попытки некоторых из предложенных методов, я придумал this JSFiddle, который делает решение проблемы содержания коробки, но, то .title в настоящее время изменения его ширина и не будет держать назначенный widht. Как исправить эту проблему?

Answer 1

Вы хотите что-то вроде этого?
просто изменить ваш CSS
посмотреть: https://jsfiddle.net/fmwd3x7m/9
... и вы должны открывать и закрывать ваши ключи правильно

.entry { 
    margin-bottom: 40px; 
    } 
div { 
    display: flex; 
    } 
.divider { 
    width: 0; 
    border-left:1px black solid; 
    } 

Answer 2

Это потому, что ваш дисплей «.entry div» установлен в «встроенный блок» в разделе css. установите его на «inline» и он будет вести себя так, как вы ожидаете.

Answer 3

Считаете ли вы использование flex display?

display: flex;