Text next to image, limit text height to image height - css

Question

So, I have an image and there should be a teaser-text next to it.
The text should fade out at the bottom and display a ">>" as read further-indicator & link.
Now to the problem: the text-side should only be as high as the image.
Is there any way to limit the text-column's height to the height of the image and place the fadeout & link at the bottom?
.su-post-img
{
float: left;
display: block;
max-width: 67% !important;
height: auto !important;
}
.su-post-excerpt
{
}
.su-post-title
{
text-transform: uppercase;
font-size: xx-large !important;
}
.fadeout {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
<div class="su-post columns">
<div class="column su-post-img"><img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div class="column">
<section>
<h2 class="su-post-title">This is the title</h2>
<div class="su-post-excerpt">
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. derit 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. derit 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.
<div class="fadeout"></div>
</div>
>>
</section>
</div>
</div>
UPDATE:
With the excellent answer from #Terminator-Barbapapa I solved my problem.
I added some JS to the answer to allow for dynamic image heights.
Here is my full solution:
// Set height of text column in post to height of image.
function AdjustTextHeight()
{
if (jQuery('.su-post-img').css("flex-basis") != "100%")
{
var height= document.getElementById('post-thumb').offsetHeight;
document.getElementById('post-text').style.maxHeight=height.toString() + "px";
}
}
// add to events
$(window).resize(function()
{
AdjustTextHeight();
});
$(document).ready(function()
{
AdjustTextHeight();
});
.post
{
display: flex;
}
.post-img img {
flex-basis: 35%;
overflow: hidden;
}
.post-text
{
flex-basis: 65%;
overflow: hidden;
position: relative;
}
.post-text::before {
content: '';
width: 100%;
height: 5em;
bottom: 0;
position: absolute;
display: block;
background-image: linear-gradient(transparent, white 70%);
}
.post-continue {
position: absolute;
bottom: 0;
left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post">
<div class="post-img">
<img id="post-thumb" src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div id="post-text" class="post-text" >
<h2>This is the title</h2>
<div class="post-excerpt">
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. derit 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. derit 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.
</div>
<a class="post-continue" href="www.google.com">>></a>
</div>
</div>
Hope this helps others!

Answer 1

Use flex to place your columns next to each other. And apply a max-height based on the height of your image. Also you can easily create the fade-out with a ::before pseudo element, so you won't need extra HTML markup. Position your link absolute at the bottom of your section.
.columns {
display: flex;
}
.column {
min-width: 200px;
max-height: 200px;
overflow: hidden;
position: relative;
}
.su-post-img img {
height: 200px;
}
.su-post-title {
text-transform: uppercase;
font-size: xx-large;
}
section::before {
content: '';
width: 100%;
height: 5em;
bottom: 0;
position: absolute;
display: block;
background-image: linear-gradient(transparent, white 70%);
}
section a {
position: absolute;
bottom: 0;
left: 0;
}
<div class="su-post columns">
<div class="column su-post-img"><img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div class="column">
<section>
<h2 class="su-post-title">This is the title</h2>
<div class="su-post-excerpt">
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. derit 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. derit 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.
<div class="fadeout"></div>
</div>
>>
</section>
</div>
</div>