In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other.
The right column is taller than the left column, which leaves a lot of empty space at the bottom of the left column.
I want the stacked columns in the left column to expand and use the available space created by the taller right column.
I think Bootstrap4's class justify-content-between and the css property justify-content: space-between; might help, but I'm unsure how to implement them in this scenario.
Any assistance would be greatly appreciated, thank you!
Here is a Fiddle for reference: here and code snippet below:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-6">
<div class="row">
<div class="col-12 col-md-4">column 1</div>
<div class="col-12 col-md-4">column 2</div>
<div class="col-12 col-md-4">column 3</div>
</div>
</div>
<!-- right column -->
<div class="col-6">
<div class="row">
<div class="col-12">
<p>
If this column were really tall, I would like columns one, two, and three from the left column to justify between themselves to match the overall height of this column.
</p>
</div>
</div>
</div>
</div>
</div>