Преобразование во flex ⇐ Html

[Anonymous]

Я пытаюсь сделать строку таблицы гибким контейнером, чтобы первые два внутри располагались рядом в одной строке, а третий появлялся на новой строке под первыми двумя.
Мой CSS ниже не работает, а не такой широкий, как его родительский элемент, который составляет 394 пикселя.

Код: Выделить всё

отображается как 197 пикселей.

Мой CSS просто размещает их все один под другим.

Код: Выделить всё

@media (max-width: 768px) {

*,
*::before,
*::after {
box-sizing: border-box;
}

#customerData {
margin-top: 10px;
}

.responsive-text {
margin-bottom: 0;
}

#bdy,
#main-navigation,
main,
#secondary-navigation-wrapper {
width: 100%;
max-width: 100%;
}

#secondary-navigation {
display: none;
}

#bdy {
padding-left: 10px;
padding-right: 10px;
}

.mobile-padding {
padding: 0;
}

header {
margin-bottom: 0;
}

#secondary-navigation-wrapper {
margin-top: 0;
padding: 0 !important;
}

#main-navigation a:not(#logo) {
display: none;
}

#home-link {
display: block !important;
}

#secondary-navigation-wrapper h1 {
text-align: center;
}

#hamburger {
display: block !important;
position: absolute;
z-index: 1000;
top: 25px;
right: 18px;
}

#logo {
width: 50px !important;
height: 50px !important;
}

h1 br {
display: block !important;
}

.mobile-padding {
position: relative !important;
}

main {
position: static;
}

#secondary-navigation.show {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
top: 50px;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
/* or 600px, etc.  */
justify-content: center;
}

#main-navigation {
height: 82px;
}

#donation-table {
width: 100% !important;
max-width: 100%;
/* keep table within parent form */
table-layout: fixed;
/* makes widths predictable */
border-collapse: collapse;
}

#donation-table tr {
width: 100%;
}

#donation-table tr td {
padding-left: 0;
}

#donorname-row td {
width: 50%;
/* equal columns */
vertical-align: middle;
}

/* Override inline input width without touching HTML */
#donation-table input[type="text"] {
width: 95% !important;
/* override inline 570px */
max-width: 100%;
box-sizing: border-box;
}

#donorname-row td {
width: 50%;
}

select {
width: 100% !important;
}

#donorcountry-row {
display: flex !important;
flex-wrap: wrap;
align-items: center;
}

#donorcountry-row>td:first-child {
flex: 1 1 45%;
max-width: 45%;
/* distribute equal space */
box-sizing: border-box;
border: none;
/* optional: removes table borders overlap */
}

#donorcountry-row td[colspan] {
flex: 1;
/* keeps it evenly distributed */
}
}

Код: Выделить всё

Donor/Cardholder Name

[i]




Donor/Cardholder Nationality



[/i]

Afghanistan
Albania
Algeria
American Samoa
Andorra
Angola



Minor (Age < 18 years)

Подробнее здесь: https://stackoverflow.com/questions/798 ... -into-flex