Как сделать так, чтобы мои div'ы выстраивались в линию, несмотря на разную длину текста?

Question

РЕДАКТИРОВАНИЕ

Вот мой обновленный вопрос: я включил ссылку на свой сайт, которая показывает точную проблему здесь. Первое поле имеет короткий заголовок, и поэтому он не сдвигает два элемента ниже (местоположение и цена) вниз очень далеко, Второй блок имеет немного более длинный заголовок, поэтому он выдвигает немного больше. Третий блок имеет самый длинный заголовок и толкает больше, чем блок 1 и 2.

В этом случае я бы хотел, чтобы в ячейках № 1 и № 2 было добавлено "пустое пространство" к их элементам div заголовка, чтобы сдвинуть разделы местоположения / цены вниз (как в блоке № 3). Это должно быть динамически, потому что иногда у блока #1 будет самый длинный заголовок. Я думал, что пустые символы могут работать, но, видимо, нет...

Спасибо за любую помощь!

НИЖЕ, ЧТО ЭТА ЛИНИИ СТАРЫЙ У моего сайта есть элемент списка, который содержит изображение и 3 деления (поле заголовка, поле местоположения и прайс-лист).

Строка, которая меня интересует, - это заголовок, в основном я бы хотел, чтобы в нем всегда было 40 символов. Если есть меньше, мне нужно добавить пустой отступ.

Я выложу весь код списка ниже, но здесь только заголовок div:

<div class="titlebox">Exceptional House with a View</div>

Этот заголовок содержит только 29 символов, но я хочу, чтобы он обрабатывался так, как если бы он содержал 40 символов. Мне все равно, если их больше 40, мне нужна только функция для заполнения текста пробелом до 40 символов.

Как это возможно? Спасибо!

Вот весь элемент списка:

<li class="list__item">
            <figure class="list__item__inner">
            <a class="divLink" href="http://www.testsite.com/BEE/info.html">
             <p class="vignette" style="background-image:url(http://www.fakesite.com/image2.jpg)"></p>
             <div class="titlebox">Exceptional House with a View</div>
       <div class="locationbox">BorrisVille</div>
     <div class="pricebox">Asking $349,000</div>
     </a>
</li>

Answer 1

Вы рассматривали возможность использования минимальной ширины CSS?

<div style="min-width: 200px;"></div>

Чтобы ответить на ваш вопрос, вы также можете создать метод в Javascript/jQuery, но это выглядит / ощущается неаккуратно:

function maxOut() {
        var spacesNeeded = 40 - $('#myDiv').html().length;
        var spacer = '';
        for (var i = 0; i < spacesNeeded; i++) {
            spacer += '&nbsp;';
        }
        $('#myDiv').append(spacer);
    }