How to set the width of all HTML elements to the width of the widest element in the list?

Issue

Here is my structure:

<div class="list">
    <div class="list-item">
        <span class="item-title">St</span>
        <button class="item-button">click</button>
    </div>
    <div class="list-item">
        <span class="item-title">Middletext</span>
        <button class="item-button">click</button>
    </div>
    <div class="list-item">
        <span class="item-title">This line contains a long text.</span>
        <button class="item-button">click</button>
    </div>
</div>

So, this code creates three lines of text, short, middle and long.

Naturally, width of each item-title element is equal to the length of text, so, first item-title element will have the smallest width, second one will have larger and the last one the largest width.

What I need to do in CSS is to set the width of all item-title elements to the width of the longest item-title element. I need this so that I can align all item-button elements to the same horizontal position.

Sure, I can hardcode the width property of all item-title elements, but I really need this width to be dynamic since in reality I do not have such static list of items. I use Vue to generate those list items based on the variable values that can change.

So, how can I say to HTML: "Align all buttons next to the end of the longest line of text, please"?

Solution

There are several ways for achieving this, the easiest is probably a table

.list
{
  display: table;
}

.list-item {
  display: table-row;
 }
 
 .item-title, .item-button {
  display: table-cell;
}

<div class="list">
    <div class="list-item">
        <span class="item-title">St</span>
        <button class="item-button">click</button>
    </div>
    <div class="list-item">
        <span class="item-title">Middletext</span>
        <button class="item-button">click</button>
    </div>
    <div class="list-item">
        <span class="item-title">This line contains a long text.</span>
        <button class="item-button">click</button>
    </div>
</div>

Answered By - flappix