Выровняйте элементы одинаково, используя CSS с разными родительскими элементами

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

<div class = "container">
  <div class = "buttons">
   <button>test</button>
   <button>test</button>
   <button>test</button>
   <button>test</button>
 </div>
 <button class = "outer">test</button>
</div>

.container{
  display:flex;
  width:100%
}
.buttons{
  display: flex;
  width: 75%;
  justify-content: space-between;
}
.outer{
  margin-left:auto
}

Ссылка на мой код https://jsfiddle.net/f74ayxh9/

Мне нужен такой результат с одинаковым интервалом и запасом, но с моей структурой HTML.

Спасибо