Как расположить заголовки над inline-block?

Question

[Vlad Konohin]

Всем доброго времени суток!
Подскажите пожалуйста, как расположить текстовые заголовки над соотвествующими им блоками? (код по ссылке ниже)
https://jsfiddle.net/tsukuyomich/37kw0g8m/4/
Прошу извинить меня за такой глупый вопрос, только-только принялся за изучение html и css.
Заранее спасибо!

Answer 1

[Andrey Vasilev]

Совет: не пишите стили в разметке по типу:

<div style=" vertical-align: middle; width: 100%; display: inline-block;">

Решение через flex:

Comments

[Vlad Konohin]

Спасибо за совет! Я работаю над уже написанным кем-то кодом, приму к сведению, что так делать не надо :)

Answer 2

[Владислав Черненко]

Изучите построение сеток: flex, grid и пр.. И подход у вас не тот. Оберните еще в 1 div заголовок и значение, тогда что-то выйдет. Типа такого

<div style=" vertical-align: middle; width: 100%; display: inline-block;">
    <div class="eshe_odin_div"> <!-- это start -->
        <div class="weight_title" style="text-align: left; margin: 0 10px;">Вес г:</div>
        <div class="weight">1</div>
    </div> <!-- это end -->
    ....
</div>

Вот потом их как колонки и используйте.

Comments

[Vlad Konohin]

Спасибо за совет!