Растянуть кнопки по ширине

Вот HTML

<div class="inlines_pills">
    <a href="#" class="transparent_pill">Delete</a>
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Cancel Edit</a>
</div>

<div class="inlines_pills">
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Delete</a>
</div>

Вот CSS

.inlines_pills {
 display: flex;
}

Вот макеты

введите сюда описание изображения

введите сюда описание изображения

Как сверстать так как не макете?


Ответы (1 шт):

Автор решения: soledar10

Пример

.inlines_pills {
  display: flex;
  margin-bottom: 1rem;
}

.transparent_pill {  
  flex-basis: 0;
  flex-grow: 1;
  padding: .5rem 1rem;
  border: 1px solid #000;
}
<div class="inlines_pills">
    <a href="#" class="transparent_pill">Delete</a>
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Cancel Edit</a>
</div>

<div class="inlines_pills">
    <a href="#" class="transparent_pill">Edit</a>
    <a href="#" class="transparent_pill">Delete</a>
</div>

→ Ссылка