Как грамотно и адаптивно решить такой вопрос с контейнером?

Question

[Alice777]

В первой секции блок с текстом находится в контейнере.
Во второй секции есть два блока разной ширины(30% и 70%) , которые также должны быть в контейнере(ровняться по нему). Фон(серый(с прозрачностью) и красный(тоже с прозрачностью)) должен быть вне контейнера.
Как это реализовать?

Еще раз напомню, на разных разрешениях экрана(например, 3000пх) все должно ровняться по контейнеру
https://jsfiddle.net/smx8rLsb/4/

Comments

[Максим]

а если проще сделать ? продублировать нижние блоки сверху 30% и 70% и один оставить пустой а другой точно будет как надо

[Андрей]

Чего-то я не могу понять что требуется, совсем с фантазией туго. Может кто по доброте душевной расшифровать?

[Kovalsky]

Андрей: +1, тоже ни черта не понял.

[Alice777]

Андрей: Никита Полевой:

вот так должно быть в результате

[Sergiu Mitu]

по моему вы требуете нереальное... хотите чтобы контент в 30% от ста ровнялся по центру на одном уровне с container у которого 500px., это какбы невозвожможно.

[Kovalsky]

Alice777: в описании я так ничего и не понял, но судя по картинке можно второй контейнер просто растянуть марджинами, а внутри компенсировать паддингами, будет также как на рисунке.

[Андрей]

Никита Полевой: Смотри, серый блок имеет 30% длины, красный имеет 70% длины. Оба они занимают 100vw. Но контент в них должен быть ограничен контейнером, предположим, 500px. Было бы легче легкого сделать один блок с градиентом двух цветов и спозиционировать его абсолютом если бы внутри не надо было делать колонки как на рисунке. Как подогнать что бы колонка заканчивалась на сером блоке и начиналась новая на красном я не смог понять вчера.

[Kovalsky]

Андрей: нууу, можно только примерно сделать похожее, то есть чтобы оно только до какой-то ширины работало, а в остальных случаях оно все равно будет фейлится. Это потому что условие "один блок 30% ширины, а второй - 70%, а контент в блоке 500px" логически невыполнимо. Если вы считаете, что на самом деле логически это возможно, то можете например сделать рисунки для разрешений 500, 700, 900, 1100, 1300, 1500, 1700, 1900, 2100 пикселей. По ним будет понятно.

Answer 1

[Олег]

Как вариант https://jsfiddle.net/smx8rLsb/5/

Answer 2

[Astrohas]

думаю так https://jsfiddle.net/smx8rLsb/8/