Ciao, si potrebbe risolvere in vari modi, uno dei quali sta nell'uso delle griglie css.
Qui un tutorial che potresti usare come base:
In this tutorial we will explore how to build a couple of different web forms using CSS Grid. For each example we will first use floats, and then see how the same layout could be done using CSS...
webdesign.tutsplus.com
Nota che viene presentato un approccio tradizionale, con l'uso di float, e confrontato con una soluzione più moderna, con l'uso dell'impaginazione a griglia.
Con la proprietà grid-template-columns, applicata al form, puoi definire l'impostazione delle colonne.
In quel caso la prima colonna (dove sono posti i label) è impostata con una larghezza fissa di 200px ma potresti applicare il valore auto per ottenere la larghezza automatica, basata appunto sull'ingombro maggiore dei vari contenuti di tale colonna.
Tieni presente che in quel tutorial la griglia agisce direttamente sui contenuti label e input, cioè non sono presenti ulteriori contenitori per definire le righe della griglia. In questo modo risulta più pratico disporre diversamente gli elementi per ottenere facilmente un layout responsive (vedi come è stato impostato il css)
Prova magari a partire da quel tutorial e vedi se riesci ad applicarlo al tuo caso, se poi incontri difficoltà se ne può discutere qui stesso.
Fai sapere, buon proseguimento.
