Background color column CSS - css

Question

I have 2 columns and a footer. One of the columns is much smaller in content than the other, but I need them to match so both of their background colors run all the way to the footer. It isn't a problem for the larger one, but not the other.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: left;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
}
.cf {
clear:both
}
/*clearfix hack*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>

Answer 1

Make the midden container a flexbox container
.midden { display: flex;}

Answer 2

You can either flex the midden div. OR, if you want to preserve your HTML structure, you can set fixed heights on both of your children. See the CSS changes I made below.
.links {
background:#55C5E8;
padding:1em 2.5%;
width: 30%;
float: right;
height: 150px;
}
.rechts {
background:#FD6943;
padding:1em 2.5%;
width: 60%;
float: left;
height: 150px;
}
.cf {
clear:both
}
.container {
height: 100vh;
width: 100%;
}
<div class="container">
<div class="midden clearfix">
<div class="rechts">
<div class="sectie" id="topmodel">
<h2>ColumnA</h2>
<p><img src="img/ColumnA.jpg" />ColumnAtext</p>
<p>ColumnA Text
</div>
</div>
<div class="links">
<ul>
<li>linkA</li>
<li>linkB</li>
<li>linkC</li>
<li>linkD</li>
</ul>
</div>
</div>
</div>
<div class="footer cf">
<p>Footertext</p>
</div>