The same height 2 columns - html

Question

I want those two columns, .list_of_groups and .group_management, to be the same height. I tried to use margin: 0 auto and height: 100%. No changes. The second column is always taller than the first.
How can I do that?
#show_groups {
background-color: black;
border: 3px dashed red;
font-size: 1.4em;
}
#group_examiner {
width: 100%;
background-color: lightblue;
text-align: center;
}
#list_of_groups {
float: left;
width: 30%;
background-color: blue;
margin: 0 auto;
}
#group_management {
float: left;
width: 70%;
background-color: lightgreen;
margin: 0 auto;
}
#group_list {
width: 25%;
background-color: red;
float: left;
text-align: center;
margin-top: 5%;
margin-left: 5%;
}
#group_options {
width: 65%;
background-color: green;
float: left;
text-align: center;
margin-top: 5%;
margin-right: 5%;
}
<div id="show_groups">
<div id="group_examiner">first</div>
<div id="list_of_groups">second</div>
<div id="group_management">
<div id="group_list">third</div>
<div id="group_options">forth</div>
</div>
</div>

Answer 1

Add display: flex; flex-wrap: wrap to the parent to create the columns instead of using float. By default, those 2 columns will "stretch" to be the same height.
#show_groups {
background-color:black;
border:3px dashed red;
font-size:1.4em;
display: flex;
flex-wrap: wrap;
}
#group_examiner {
width:100%;
background-color:lightblue;
text-align: center;
}
#list_of_groups {
width:30%;
background-color:blue;
}
#group_management {
width:70%;
background-color:lightgreen;
}
#group_list {
width:25%;
background-color:red;
float:left;
text-align: center;
margin-top: 5%;
margin-left: 5%;
}
#group_options {
width:65%;
background-color:green;
float:left;
text-align: center;
margin-top: 5%;
margin-right: 5%;
}
<div id="show_groups">
<div id="group_examiner">first</div>
<div id="list_of_groups">second</div>
<div id="group_management">
<div id="group_list">third</div>
<div id="group_options">forth</div>
</div>
</div>