CSS сжимает контейнер до размера двух динамических разделителей ширины

Это то, что я пытаюсь достичь

                            CONTAINER
 --------------------------------------------------------------
|                      CENTERED in CONTAINER                   |
|    -----------------------------------------   ----------    |
|   | Content Div                             | | Info Div |   |
|   | shrink to contents  OR                  | | shrink to|   |
|   | max size: (container width - info div ) | | contents |   |
|   |                                         |  ----------    |
|    -----------------------------------------                 |
|                                                              |
|    ------------------------------------------------------    |
|   |  text div: width = width of content div + info div   |   |
|    ------------------------------------------------------    |
 --------------------------------------------------------------

ИЗОБРАЖЕНИЯ (грубая MSPAINT): пример небольшого контента и пример большого контента

DIV INFO: Максимальное 192 пикселя, но при необходимости должно сокращаться.

СОДЕРЖАНИЕ DIV: Сокращение содержимого. Если контент большой, ширина = оставшееся пространство в контейнере.

DIV TEXT: width = ширина CONTENT + ширина INFO.

Вот что я до сих пор. Я не использую float, потому что я хочу, чтобы контент и информационные divs были в целом сосредоточены на странице.

У меня возникают проблемы:

• текст div расширяется до размера контейнера.
• Если окно браузера сокращено, информационный div получает столкновение со следующей линия.

CSS

#container {
    width: 80%;
    min-width: 760px;
    padding-top: 0;
    margin: 0 auto; 
}
#content {
    max-width: 71%; /* Kinda solves the problem of bumping info div
                       to next line, but leave awkward gaps */
    width: auto;
    vertical-align: top;
    display: inline-block;
}
#info {
    width: auto;
    vertical-align: top;
    text-align: left;
    display: inline-block;
}
#text {
    margin: 10px auto;
    width: auto;
    display: block;
    text-align: left;
}

HTML

<div id="container">
<div id="main">
    <div id="content"><img src="image.jpg" />Lorem ipsum ...</div>
    <div id="info">Lorem ipsum dolor</div>
    <div id="text">Lorem ipsum ...</div>
</div>
</div>