Как не переносить текст на новую строку после изображения?

Question

[Вячеслав Рыжков]

Идея такая, есть блок-ссылка, там есть изображение-иконка, заголовок и текст-описание. Возможно ли разместить это так, как показано на скриншоте, желательно не пренебрегая position: absolute;. Вот сам код:

div#main_content {
    margin-top: 7%;
    margin-left: 10%;
    margin-right: 20%;
}

div.subblock {
    margin-top: 2%;
    margin-bottom: 2%;
}

div.downloadBlock {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    padding: 3%;
    transition: background-color 0.3s ease-out;
}
div.downloadBlock:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

img.icon {
    display: inline-block;
    width: 12%;
}

span.blockTitle {
    display: inline-block;
    font-family: "Raleway-Black";
    font-size: 22px;
}

a.block {
    display: inline-block;
    text-decoration: none;
    color: black;
}

<a class="block" href="https://8bgsg.ru/download?id=1">
    <div class="downloadBlock">
        <div>
            <img class="icon" src="icons/fb2.png">
                </div>
                    <div>
                        <span class="blockTitle">FB2</span>
                    </div>
                </div>
            </a>
        </div>
</a>

Answer 1

[Никита Кит]

Вообще не понимаю что ты накосиборил и зачем тебе весь этот код, но на вопрос отвечу. Есть 2 способа не переносить 2 дочки у одного родителя на разные строки. Дать родителю: 1) display: flex 2) white-space: nowrap .

Comments

[Вячеслав Рыжков]

Насколько я знаю, что white-space: nowrap; предназначен только для текста, а вот display: flex вроде сработал, но заголовок теперь "примагнитился" к левой части блока

[Никита Кит]

rugrisser, ой надо же. А ты что хотел, чтоб он сразу вёл себя так, как ты вообразил? Нет, братан, придётся немного покодить. Как минимум margin-left, как максимум понять сие:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Вячеслав Рыжков]

Никита Кит, не всё, пофиксил, теперь всё норм встало)

Answer 2

[ThunderCat]

flex? float? bootstrap col-? не, не слышал...

Comments

[Никита Кит]

ай. float? Уж лучше пусть дальше inline-blockами косиборит))))

[ThunderCat]

Никита Кит, ну, тут и без дивов обойтись можно, наше дело рассказать куда копать, а лопату и могилу направление каждый выбирает сам.