Як я можу вирівняти його висоту кордону автоматично для цього 2 fieldset за допомогою css? - css3

Як я можу вирівняти його висоту кордону автоматично для цього 2 fieldset за допомогою 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 допоможіть мені тут. і дякую

UPDATE

Над кодом структура мого коду. Я розподіляю моє поле на рядок.

Відповіді:

Ви можете помістити їх у батьківський контейнер, як таблиця або розділ, і мати двох дітей

 висота = 100%.

Ви можете використовувати табличний дисплей (не пов'язаний з таблицею - HTML-структура, яка є способом перейти з табличними даними та способом НЕ йти іншим чином).
Клітини мають властивість пристрою бути такої ж висоти (і дотримуватися тієї ж лінії / рядки, що ви намагаєтеся)

Коли ви опублікували свій код як зображення, мінімальний приклад (сумісність 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 буде мати такий же висоту, але все-таки не наліво (додати outline: 1px dotted someColor для обох і ви побачите це). Так вам потрібно додати height: 100% для обох контейнерів (комірок), елемент з кордоном (fieldset) і всі елементи між собою (тут немає). Або вилучіть кордон із поля fieldset і додайте його до .col-lg-6; вона не змінює семантики чи доступність і має той же візуальний результат

EDIT2: Flexbox Інший спосіб керування вертикальними висотами досить легко. Сумісність IE10 + (і легко досягати та підтримувати, якщо ви використовуєте Autoprefixer, інакше Мех)