I am facing a dilemma with two child divs placed side by side within a parent div. The height of each div is generated based on the viewport-size, making it unknown.
The issue arises in the left div where an image needs to be resized to match the height of the right div which has a dynamic height value. Additionally, the parent div should adjust its size according to the second child div.
Here is the HTML structure:
<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>
And here is the CSS code snippet:
.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;
}