Child divs next to each other with auto height - html

Question

I have two child divs next to each other inside a parent div. I don't know what the height of either div has to be, because its generated by viewport-height.
My problem is that in the left div I have an image and I don't know how I can get that image the same size as the right div which needs to have height: auto. The parent div has to be adjust to the second child div.
HTML
<div class="post-info">
<a href="" class="post-link">
<div class="post-info_img"></div>
<div class="post-info_content">
<p class="categorie_info">Category</p>
<p class="titel">Header</p>
<p class="info">
Lorem ipsum dolor sit amet...
</p>
<p class="date">June 2018</p>
</div>
</a>
</div>
CSS
.post-info {
width: 90vw;
border-radius: 15px;
background-color: #F6F6F6;
box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
margin-bottom: 2.5vh;
display: table;
}
.post-info_img {
background-image: url('http://via.placeholder.com/350x150');
width: 30vw;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 15px 0 0 15px;
display: table-cell;
}
.post-info_info {
padding: 5% 4vw;
display: table-cell;
}
.categorie_info {
color: #5B7AEB;
}
.titel {
font-size: 14px;
color: #2B2B2B;
margin: 0;
}
.info {
font-size: 14px;
margin-top: 5px;
}
.date {
font-size: 12px;
color: #707070;
}
.post-info {
width: 90vw;
border-radius: 15px;
background-color: #F6F6F6;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 2.5vh;
display: table;
}
.post-info_img {
background-image: url('http://via.placeholder.com/350x150');
width: 30vw;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 15px 0 0 15px;
display: table-cell;
}
.post-info_info {
padding: 5% 4vw;
display: table-cell;
}
.categorie_info {
color: #5B7AEB;
}
.titel {
font-size: 14px;
color: #2B2B2B;
margin: 0;
}
.info {
font-size: 14px;
margin-top: 5px;
}
.date {
font-size: 12px;
color: #707070;
}
<div class="post-info">
<a href="" class="post-link">
<div class="post-info_img"></div>
<div class="post-info_content">
<p class="categorie_info">Category</p>
<p class="titel">Header</p>
<p class="info">
Lorem ipsum dolor sit amet...
</p>
<p class="date">June 2018</p>
</div>
</a>
</div>

Answer 1

Looks like you've misspelled a classname in your CSS.
Find .post-info_info and replace it with .post-info_content:
.post-info {
width: 90vw;
border-radius: 15px;
background-color: #F6F6F6;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 2.5vh;
display: table;
}
.post-info_img {
background-image: url('http://via.placeholder.com/350x150');
width: 30vw;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 15px 0 0 15px;
display: table-cell;
}
.post-info_content {
padding: 5% 4vw;
display: table-cell;
}
.categorie_info {
color: #5B7AEB;
}
.titel {
font-size: 14px;
color: #2B2B2B;
margin: 0;
}
.info {
font-size: 14px;
margin-top: 5px;
}
.date {
font-size: 12px;
color: #707070;
}
<div class="post-info">
<a href="" class="post-link">
<div class="post-info_img"></div>
<div class="post-info_content">
<p class="categorie_info">Category</p>
<p class="titel">Header</p>
<p class="info">
Lorem ipsum dolor sit amet...
</p>
<p class="date">June 2018</p>
</div>
</a>
</div>

Answer 2

Issues
.post-info_info doesn't exist in HTML.
.post-link and .post-info_content don't exist in CSS.
.post-info is display:table yet its only child was .post-link that had no styles at all.
The 2 divs that have display:table-cell were .post-info_img (not a child of an element with display:table) and .post-info_info (doesn't exist in HTML).
That pretty much guarantees that your layout wouldn't even come close to the expected results.
Solutions
Made all classes very simple and semantic.
Changed all of the div tags to a semantic equivalent.
Assigned .link as display:flex so its children .img and .content sit side-by-side.
Changed background image into an img tag then assigned display:block, and object-fit:cover
Replaced percentage dimensions with intrinsic dimensions (ex. width:20% to width:20vw)
Added the Boba Fett because he pwns.
Demo
.info {
width: 90vw;
border-radius: 15px;
background-color: #F6F6F6;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 2.5vh;
display: table;
font-size: 14px;
margin-top: 5px;
}
.link {
display: flex;
justify-content: center;
}
.img {
position: relative;
width: 35vw;
min-height: 40vh;
display: table-cell;
padding: 0;
overflow:hidden
}
.img img {
position: absolute;
top: 0;
bottom: 0;
right: .5em;
left: .5em;
width: 35vw;
min-height: 35vh;
object-fit: cover;
border-radius: 15px 0 0 15px;
overflow:hidden;
}
.content {
width: 50vw;
min-height: 40vh;
}
.category {
color: #5B7AEB;
font-variant: small-caps;
font-size: 1.25em
}
.title {
color: #2B2B2B;
margin: 0;
letter-spacing: 2px;
font-size: 16px;
line-height: 1.83em
}
.date {
color: #707070;
}
<section class="info">
<a href="" class="link">
<figure class="img">
<img src='https://www.sideshowtoy.com/wp-content/uploads/2018/01/star-wars-boba-fett-deluxe-version-sixth-scale-figure-hot-toys-feature-903352-900x600.jpg'>
</figure>
<article class="content">
<header class="category">Profile
<h1 class="title">Boba Fett</h1>
</header>
<p class="text">
"I am the best bounty hunter in the galaxy. I will find your rebel scum or the next carbonite bath is on me," Specializes in Jedi location...
</p>
<footer class="date"><small>June 2018</small></footer>
</article>
</a>
</section>