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

Issue

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

Is this what you're looking for?

.row{
  display: flex;
}
.columns{
  border: red solid 2px;
  padding: 15px;
  width: 100%;
}

<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" id='large-div'>
    <h2>Header 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div> 
  <div class="columns large-4 medium-4" id='small-div'>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
    </p>
  </div> 
</div>

Answered By - Crimp