How to create a column in CSS the same width as the larger writing?

[manoodin]

The text of the ‘same-width’ class must be the same width as the largest writing. If it is not possible to do it in css, please in pure javascrip,. thank you in advance.

<style>
    .field {display: flex;}
</style>

<fieldset>
    <div class="field">
        <label>
            <span class="same-width">Name</span>
            <input name="nome" placeholder="Energy">
        </label>
        <div class="tooltip">
            <span>?</span>
        </div>
    </div>
    <div class="field">
        <label>
            <span class="same-width">Drop down selection</span>
            <select required="" name="dropdown">
                <option value="">-- please select --</option>
                <option value="o1">Option 1</option>
                <option value="o2">Option 2</option>
                <option value="o3">Option 3</option>
            </select>
        </label>
        <div class="tooltip help">
            <span>?</span>
        </div>
    </div>
    <div class="field">
        <label>
            <span class="same-width">Checkbox</span>
            <span><input type="checkbox">
                I agree</span>
        </label>
    </div>
    </fieldset>

[Archibald]

With much simplification of the HTML, I suggest . . .

[m_hutley]

@Archibald What (I THINK) he’s trying to accomplish is effectively to generate a 2-column table such that the labels all have the same width and fit to the largest among them.

Trouble with that is, the elements he wants to grid arent at the same parent level.

[Archibald]

Yes, it could be a table layout as here . . . .

(A different layout would be necessary for small smartphones)

[manoodin]

Solved, thank you