Как правильно сверстать следующий блок с элементами?

Question

[Hryhorii]

Доброго времени суток. Есть следующий блок с формами:


Его ширина - 730px, отступы между инпутами 30px справа и 20px снизу.
Размер шрифта 12px и line-height - 20px.
Подскажите, как правильно сверстать это удовольствие. Переделал раз 6, но постоянно формы оказываются шириной чуть больше, чем нужно, когда указываю нужные отступы, паддинги, размер текста. Т.к. услышал совет, что width и height без надобности для инпутов указывать не нужно. Да и там находятся лишние пиксели, если указать.

Делал через флексбоксы, но момент с размерами вообще непонятен, все продолжает съезжать и иметь кривой размер.

Comments

[Hryhorii]

The Wizard of Oz, https://codepen.io/callmegrisha/pen/OJMXzmw
Самая крайняя

Answer 1

[secretsergey]

https://codepen.io/secretsergey/pen/NWxrXXJ
Немного подправил то что у Вас было.
PS Называть классы по 5 слов не самая лучшая идея :)

Comments

[Hryhorii]

Спасибо! Сейчас буду разбираться. С названиями да, есть некоторые неурядицы, так как эта форма из макета, который я вообще впервые в жизни верстаю сам, поэтому разбор полетов еще предстоит огромный, полагаю. Можете объяснить, в чем там у меня проблема была? Дабы понять, над чем нужно работать и какую матчасть подтянуть.

[secretsergey]

Гриша,
Т.к. почти все правки были в css, то просто откройте свою вёрстку и мою. После чего просто узнавайте в Гугле что делает каждое новое свойство.