У меня есть простая структура HTML (jsfiddle):

<li>
    <div class="buttons">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners">
        Даня Абрамов и Саша Васильев
    </div>
    <div class="text">
        трали-вали трали-вали трали-вали трали-вали
    </div>
</li>

buttons, owners а такжеtext имеютdisplay: inline-block.

Это выглядит хорошо, когдаtext довольно маленький:

Однако по мере роста текстаinline-block элементы расширяются и в конечном итоге попадают за линию:

Это безобразно, и я бы хотел этого избежать.
Вместо этого я хочу добиться этого:

Когда текст слишком велик, чтобы поместиться внутри элемента, я хочу, чтобы он был обведен линиями.
Я пробовал настройкуfloat: left на элементах, но не мог заставить это работать.

Как правильно сделать это с помощью HTML и CSS (без таблиц)?