Два divs бок о бок, одна ширина 100% ширины зависит от контента

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

Я могу сделать это с помощью TABLE, но можно ли это сделать с помощью DIV? Или это еще одна вещь, которую DIV не может сделать?

Здесь код:

            #right{
              background: green;     
              width: 100%;
            }
            #left {
              margin-top: 5px; /* to test if they intersect*/
              background: red;
            }  
            #container {
               width: 800px;
            }
            <div id="container">
               <div id="left"> This div is as big as it content</div>
               <div id="right"> rest of space</div>
            </div> 

Спасибо за ответы!