Как сверстать такой блок не меняя структуру html?

Question

[Артем Колчин]

<div class="coment">
<div class="coment_name">Имя</div>
<div class="coment_tel">Телефон</div>
<div class="coment_email">Email</div>
<div class="coment_text">Текст коментария</div>
<div class="coment_button">Кнопка отправить.</div>
</div>

Скажите такое реально сверстать не трогая html разметку? чтоб coment_text был слева на всю ширину
а остальные поля колонкой справа?

Конечно я вынес блок коменты через position absolute, но в итоге какая то дичь мне кажется выходит при адаптации на мобилку. Может есть более изящные решения.

Comments

[Андрей Федоров]

css grid, только учтите, что обычное дело на десктопах навигация по форме с помощью tab. Если блоки только визуально переставлены, то у пользователей возникнет недоумение, почему после e-mail идет фокус на текст, а не на кнопку отправить.

[Ankhena]

Конечно я вынес блок коменты через position absolute, но в итоге какая то дичь мне кажется выходит при адаптации на мобилку.

Не очень понятно как абсолют на десктопе связан с дичью на мобилках..
Должен быть никак не связан.

Может есть более изящные решения.

Да, гриды.

Вот простенькая игра на полчаса для быстрого начального освоения гридов
https://cssgridgarden.com/#ru

Answer 1

[imko]

Да, гридом, ну если мы конечно опускаем что в разметке нет ни инпутов ни кнопки