Align items equally using CSS with different parents

I want align items with equal spacing and with different parents and without adding any width to those items. I tried below code but not working. Please help me to on this.

<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}

Link for my code https://jsfiddle.net/f74ayxh9/

I want result like this with equal spacing and margin but with my HTML structure.

Thank you