[SOLVED] css: two div's in one row, height=100% for smaller one not working

css: two div's in one row, height=100% for smaller one not working

I'm using "foundation for sites" to achieve responsiveness.

There, I have:

<div class="row"> <!-- defines a grid of 12 columns -->
  <div class="columns large-1 medium-1">&nbsp;</div> <!-- some space to the left -->
  <div class="columns large-6 medium-6" style="border: red solid 1px;">
    a lot of content, including a header, and multiple lines of text
  </div>  
  <div class="columns large-4 medium-4" style="border: red solid 1px; height: 100%;">
    a little bit of content
  </div>
  <-- the right spacer column is not needed -->  
</div>

The red borders are only there for testing. To my understanding, the "height: 100%" of the smaller div should make it as high as the bigger one. But the border is only around the text content. When I inspect the div's using the browser development tools, the "row" div and the big "columns" div have a computed height of >100 px, while the small "column" div has only 17 px.

The reason why I need the 100% height is that the content of the small div will be aligned to the bottom eventually. But before I can do that, the height must work.

The css for classes "row" and "columns" is completely defined in foundation, I did not change or override anything except the element styles in the above example.

What am I missing ?

Edit:
I'm trying to paint it in character graphics, showing only the borders of the "columns" div's.

It actually looks like:

|--------------------|--------------------|   
| lots of text       | a little text      |  
| lots of text       |--------------------|  
| lots of text       |  
| lots of text       |  
|--------------------|

But it should look like:

|--------------------|--------------------|  
| lots of text       | a little text      |  
| lots of text       |                    |  
| lots of text       |                    |  
| lots of text       |                    |  
|--------------------|--------------------|

Solution

Eventually, I managed to get equal height by using foundation's data-equalizer: https://get.foundation/sites/docs/equalizer.html
As I was using foundation in this webapp already, this was a perfect match.

I still consider myself a relative foundation newbie, so at first I did not know what to search for in the docs.