Как сверстать такие элементы?

Question

[metori]

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

Comments

[Ankhena]

1. Используйте это: https://html5book.ru/css3-flexbox/
Ну или инлайн блоки тоже сойдут, если флекс не по душе.
2. Можно использовать calc для указания ширины столбцов.

Answer 1

[Qairat]

Примерно так: https://jsfiddle.net/3L7atg4t/

Comments

[metori]

Cпасибо, а как все расположить независимо от центрального блока? И как sometext сделать не по центру HELLO, а по букве H выравнять? И отступ другой сделать

[Qairat]

metori:
.sometext { margin-left: -25px; }