Ako môžem vyrovnať výšku hranice automaticky túto 2 pole pomocou css? - css3

Ako môžem vyrovnať výšku hranice automaticky túto 2 pole pomocou 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;
}

pls pomôžte mi tu. a vďaka

UPDATE

Nad kódom a štruktúrou môjho kódu. Rozdeľujem pole na každom riadku.

odpovede:

Môžete ich umiestniť do rodičovského kontajnera ako tabuľka alebo div, a nechať dve deti

 výška = 100%.

Môžete použiť tabuľkové zobrazenie (nesúvisiace s tabuľkovou - štruktúrou HTML, čo je spôsob, ako ísť s tabuľkovými údajmi a spôsob, akým inak nebudete chodiť).
Bunky majú vlastnosť niiiice, ktorá má rovnakú výšku (a prilepenie na rovnakú čiaru / riadok, čo vyskúšate)

Ako ste odoslali svoj kód ako obrázok, minimálny príklad (kompatibilita 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;
}

EDIT: .col-lg-6 bude mať rovnakú výšku, ale stále nie je polia (pridať outline: 1px dotted someColor k obom a uvidíte to.) Takže musíte pridať height: 100% na oba kontajnery (bunky), prvok s hranicou (polia) a všetky prvky medzi nimi (žiadny tu). Alebo odstráňte okraj z políčka a pridajte ho .col-lg-6; nezmení sémantiku ani prístupnosť a má rovnaký vizuálny výsledok

Edit2: flexboxu je ďalší spôsob riadenia vertikálnych výšok pomerne ľahko. Kompatibilita je IE10 + (a je ľahké dosiahnuť a udržiavať, ak používate Autoprefixer, inak meh)