Как установить маржу для элементов в моем случае

Question

Я пытаюсь создать представление ответа для своего приложения.

В настоящее время я две колонки

Левый должен быть гибким в зависимости от ширины браузера и правого установил ширину 120px.

HTML

<div class="wrapper row"> 
    <div class="left col-xs-9"> 
     This is the left column 
    </div> 
    <div class="right col-xs-3"> 
     Right column 
    </div> 
</div> 

CSS

.wrapper { 
    background-color: blue; 
    color: #fff; 
} 
.left { 
    margin-right:20px; 
    background-color: red; 
} 
.right { 
    width: 120px; 
    background-color: green; 
} 

Проблема в том, мне нужно, чтобы иметь запас 20px между этими двумя колонками независимо от того, какой браузер ширина, а правая поддерживать 120px ширину. Как мне это сделать? Благодарю.

http://jsfiddle.net/4ufk1xxc/2/

Answer 1

Изменение оболочки в Flexbox решает эту проблему:

.wrapper { 
    display: flex; 
} 

Updated Fiddle