Align items equally using CSS with different parents

September 2, 2024

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

>Solution :

You can do this with display: contents on the button container element.

.container {
  display: flex;
  justify-content: space-between;
  outline: 1px solid red;
  margin: 2em;
}

.buttons {
  display: contents;
}

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