Child divs next to each other with auto height

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>