Eu estou tentando para determinar a melhor maneira de fazer 2 elementos de mesmo tamanho com base no texto do elemento maior.
Basicamente os 2 itens de texto "ouverture de sessão" e "xyz" (usada para uma palavra curta exemplo), de modo que ambos os botões são do mesmo tamanho e são grandes o suficiente para lidar com o maior dos 2 entradas de texto.
Isso pode ser feito via Javascript, Angular, o que for.
Você pode fazer isso com CSS grids:
.button-panel {
display: inline-grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 10px;
}<div class="button-panel">
<button>A very long button name</button>
<button>Ok</button>
</div>Você pode começar o botão com a maior offsetWidthe , em seguida, aplicar-se que para o outro botão do width propriedade de estilo.
const buttons = document.querySelectorAll('button')
if (buttons[1].offsetWidth > buttons[0].offsetWidth) {
buttons[0].style.width = buttons[1].offsetWidth + 'px';
} else {
buttons[1].style.width = buttons[0].offsetWidth + 'px';
}<button>Hello World!</button>
<button>Spectric</button>Se você tem ultiple botões, uma solução mais escalável:
const buttons = document.querySelectorAll('button')
const biggestWidth = [...buttons].reduce((a,b) => a = b.offsetWidth > a ? b.offsetWidth + 1 : a, 0)
buttons.forEach(e => e.style.width = biggestWidth + 'px')<button>Hello World!</button>
<button>Spectric</button>Você pode definir a propriedade de min-width para o elemento de botão. Fazendo isso o botão menor vai ser da mesma largura que o maior.