Как сделать, чтоб два блока были в одном ряду, пока влезают, а потом в одной колонке и растянулись бы на всю ширину?

Question

[PO6OT]

Как сделать, чтоб два блока были в одном ряду и правый растянулся бы полностью, а левый растянулся бы только на определенную ширину, но если в одном ряду они не помещаются, то они выстроятся в одну колонку и растянутся на всю ширину (без js, только html).
Пока помещаются на экране оба блока, выглядеть всё должно как на первой картинке, а когда они оба уже не влезают, то выглядеть всё должно как на второй картинке.

Первая:

Вторая:

Answer 1

[Y0Y]

Попробуй как-нибудь так.

Comments

[Думай Головой]

ну так я про тоже

[PO6OT]

переделал под себя немного)
https://jsfiddle.net/x6jwg9w4/7/

[PO6OT]

а почему именно 400px в этой строке?
media (max-width: 400px) {

[PO6OT]

ничего?
https://habrastorage.org/files/2f6/848/630/2f68486...

[Y0Y]

Вадим Егоров: Можно разместить в конец родителя (в моем примере - .wrapper) элемент со стилем clear: both. Пример: jsfiddle.net/dmttu5hc/1 либо без добавления элемента: jsfiddle.net/dmttu5hc/2/. Конечно, это не единственные решения, можно использовать и для позиционирования блоков другие методы (display: inline-block, flexbox). Насчет 400px - это примерная ширина окна, при которой нужно будет изменить стили колонок.

[PO6OT]

Y0Y: спасибо

Answer 2

[Думай Головой]

открой для себя media queries

Comments

[PO6OT]

нет, мне не отдельно для телефонов надо

[Думай Головой]

Вадим Егоров причём тут отдельно для телефонов? У тебя на картинке я вижу ресайз экрана, так сделай media query для этой точки, где блок падает вниз задай ему width 100%

[Думай Головой]

и второму width 100% соответственно

[PO6OT]

Думай Головой: а ясно, просто я думал, что media - это стили для разных устройств (принтер, смартфон, компьютер)

[Думай Головой]

Вадим Егоров media screen нужно писать для уточнения, почитай