Помогите сверстать.

Здравствуйте!

Весь день бился над, казалось бы, простой задачей: хочу сделать так, чтобы один блок с текстом был по середине контейнера, а второй прижимался к нему справа, притом ширины блоков задавались содержимым текстом, как на картинке.
где блок с черной рамкой это окно браузера.
Я новичок, что только не пробывал, не получается, хотя бы суть подскажите, флексом по моему вообще такое не сделать, а флоатом как не знаю. Про флоат читал и пробывал, не получается и примеров в инете тоже не нашел.

 

Я конечно сверстал флексом, но кривовато: заставил блоки выровняться по центру, слева добавил такой же блок как справа (зеленый), только невидимый, но это криво!
Вдруг я захочу слева разместить картинку, чтоб выровнялась по центру пространства между левым краем коричневого блока и левым краем синего блока. Как мне это сделать?

 

Да я допер как нафлексить, сейчас тестю, если встряну, то выложу.

 

Сверстал я с помощью flexbox, просто надо было думать глубже, многомернее, но это только кусочек сайта и никак не весь сайт, вопросов множество. А вы, я так понял товарищ очень шаристый в этом. Может дадите какие нибудь другие координаты для связи, мыло или месенджер, просто вопросы у меня разносторонние, а порой и тупые, а писать о разных вещах в одной теме нельзя, а тупые вопросы выставлять на всеобщее обозрение стыдно.

вот пара вопросов, меня мучающих:

1. Совместимость сайта с разными мониторами, анпример у виндовых 1024х768, 1280х1024, а у маков разрешение в 2 раза выше. Значит задавать размеры в пикселях здесь не вариант. Наверняка на эту тему много работ понаписано, подскажите действительно дельные.
2. Тупой вопрос. Рекламный баннер от гугл, написани на флеше это понятно, а как его на сайт внедрить, так чтоб он не вылез за пределы выделенного ему блока, никогда не размещал у себя рекламу от гугл, посоветуйте дельное чтиво.