CSS: display two lines as one inline tag in a text

Question

I want to design in HTML/CSS the one bureaucrate form, where fields labeled under the line. Like this one:

I'm tried to use inline-flex for those fields:

HTML:

<p>The long text of a bureaucrate document. The commission consisting of:
<span class="labeled-field">
    <span class="field-text">
        John Doe, John Doe, John Doe, John Doe, John Doe, John Doe
    </span>
    <span class="field-label">
        (list of commission members) 
    </span>
</span>decided that the device was ready for verification and testing.
</p>

CSS:

.labeled-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.field-text {
    border-bottom: solid 0.05rem;
    text-align: center;
}
.field-label {
    font-size: 0.8rem;
}

However, inline-flex renders as inline-block and instead of word wrapping, wrapping all .labeled-field block:

So how to display the .labeled-field as inline, with word wrapping?