Come posso allineare automaticamente l'altezza del bordo in questo campo 2 usando css? - css3

Come posso allineare automaticamente l'altezza del bordo in questo campo 2 usando css?

  /*Fieldset and Legend*/
.the-legend {
font-size: .9vw;
font-weight: 600;
line-height: 10px;
width:auto;
padding:0 10px;
border-bottom:none;
}

.the-fieldset {
border: 1px solid silver;
border-radius: 5px;
padding: 20px;
margin-bottom: 15px;
}

vi prego di aiutarmi qui. e grazie

AGGIORNARE

Sopra codice una struttura del mio codice. Divido il mio fieldset per riga.

risposte:

Puoi metterli in un contenitore genitore come un tavolo o div e avere i due bambini

 altezza = 100%.

È possibile utilizzare la visualizzazione tabellare (non correlata alla tabella - HTML - struttura che è il modo di andare con i dati tabulari e il modo in cui NON va diversamente).
Le celle hanno la proprietà niiiice di essere della stessa altezza (e attaccare sulla stessa linea / riga qualunque cosa tu provi)

Come hai postato il tuo codice come immagine, un esempio minimo (compatibilità IE8 +):

.col-lg-12 {
display: table;
table-layout: fixed; /* the other tabular algorithm */
width: 100%;
}
.col-lg-6 {
display: table-cell;
width: 50%
}
/* Managing gutter between fieldset. No margin, only padding, on cells so we use inner elements */
.col-lg-6:first-child .the-fieldset {
margin-right: 2rem;
}
.col-lg-6:last-child .the-fieldset {
margin-left: 2rem;
}

MODIFICARE: .col-lg-6 avrà la stessa altezza ma non sarà fieldset (aggiungi outline: 1px dotted someColor ad entrambi e lo vedrai). Devi quindi aggiungere height: 100% a entrambi i contenitori (celle), l'elemento con un bordo (fieldset) e tutti gli elementi intermedi (nessuno qui). O rimuovere il bordo dal fieldset e aggiungerlo a .col-lg-6; non cambia semantica o accessibilità e ha lo stesso risultato visivo

EDIT2: Flexbox è un altro modo di gestire le altezze verticali abbastanza facilmente. La compatibilità è IE10 + (e facile da raggiungere e mantenere se si utilizza Autoprefixer, altrimenti meh)