Как сверстать такую форму?

Question

[KononovD]

Здравствуйте!
Возник вопрос как сверстать такую форму?

Думал сделать это с помощью grid, но потом подумал еще раз и сделал таблицу)))
Мне кажется, табличная верстка - это плохо, но других идей у меня не нашлось))
Вопрос именно в инпутах и тексте, который внизу

Есть идеи?)

Answer 1

[Smeecy Smeecy]

Чем не устраивает flexbox?

Comments

[KononovD]

Я не знаю как flex`ом ровнять один элемент относительно другого)
Если покажите - буду признателен)

[Smeecy Smeecy]

KononovD, На скорую руку

Answer 2

[Александр Мангазеев]

однозначно flexbox )

Comments

[KononovD]

Я не знаю как flex`ом ровнять один элемент относительно другого)
Если покажите - буду признателен)

[Александр Мангазеев]

можно почитать вот тут

Answer 3

[vaflya]

Примерно:

<style type="text/css">
  .warp {
    display: flex;
  }
</style>

<form method="POST" action="index.php">
  <div class="warp">
    <div>Цена</div>
    <div><input type="text"></div>
    <div>комиссия</div>
  </div>
  <div class="warp">
    <div>Яндекс деньги</div>
    <div><input type="text"></div>
    <div></div>
  </div>
  <div class="warp">
    <div>телефон</div>
    <div><input type="text"></div>
    <div></div>
  </div>
  <div class="warp">
    <div>телефон</div>
    <div><textarea></textarea></div>
  </div>
  <div class="warp">
    <div>капча</div>
    <div><input type="text"></div>
    <div><img></div>
  </div>
  <div class="warp">
    <div>текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</div>

Стили уже сами допишите. Для Вас основное свойство display: flex -которое позволяет выстроить блоки в линию внутри себя

Comments

[KononovD]

Я не знаю как flex`ом ровнять один элемент относительно другого)
т.е. выставить инпуты и текст по одной линии, а маргинами у лейблов двигать инпуты - вообще дичь какая-то

[vaflya]

ровнять можно простенько так:

.col-min {
  width: 33%;
}
.col-mid {
  width: 66%;
}
.col-big {
  width: 99%;
}

можно в пикселях и пишете class-ы блокам div

[vaflya]

KononovD, если все еще не понятно, скажите... я сверстаю

[vaflya]

https://codepen.io/anon/pen/eXeBZL?editors=1100

[vaflya]

KononovD, https://codepen.io/anon/pen/eXeBZL?editors=1100

[KononovD]

vaflya, я думал, что существует метод сделать это более элегантно, а не просто указать фиксированную ширину) и все)
Спасибо)

[vaflya]

KononovD, можно, но зачем?

[KononovD]

vaflya, респонсив, все дела
а так, я вчера же и понял, что если таблицу делать - все равно задавать фиксированную ширину первому блоку - и переделал на флексы