How to match the height of parent container and other siblings to the smallest sibling or one specific sibling (not the tallest) inside of parents?

Question

I have been trying to adjust the height of an image container <section> to text <section>. The text section will have dynamic content size is not fixed, but for any situation, I want the Image before the text with some little space between and height of the container to the height of text <section>

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

body > div {
  width: 50vw;
  height: 50vh;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*::after,
*::after {
  display: block;
}
html {
  font-size: 62.5%;
}
body {
  box-sizing: border-box;
  font-family: Montserrat;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.article {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 1em;
}

.article__main__heading {
  color: #404040;
  font-size: 2.4rem;
  font-weight: 400;
}

.article__main__breif {
  color: #908d8d;
  font-size: 1.4rem;
}

.article__main__info {
  font-size: 1.4rem;
}

.article__main__info__section {
  text-decoration: none;
  color: #404040;
}

.article__main__info__date {
  color: #404040;
  opacity: 0.25;
}

.article__main__info__date::before {
  display: inline;
  content: "/";
  margin: 0 1%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Adjust Height With Smallest</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div>
      <article class="article">
        <section class="article__image">
          <img
            src="https://i.stack.imgur.com/h1OAI.jpg"
            alt="Catch waves with an adventure"
          />
        </section>
        <section class="article__main">
          <h3 class="article__main__heading">Catch waves with an adventure</h3>
          <p class="article__main__breif">
            Gujarat is vastly underrated and it’s a mystery to us
          </p>
          <div class="article__main__info">
            <a href="#" class="article__main__info__section">Travel</a>
            <span class="article__main__info__date">August 21 2017</span>
          </div>
        </section>
      </article>
    </div>
  </body>
</html>

I tried position: aboslute I was working but can't add space between and on small screen stacks.

Also tried display: table-row and display: table-cell not working

I want this kind of layout for any condition.

I tried applying display: flex, grid, table-row,block on parent and display: table-cell, inline-block on children. Tried positioning the first child absolute. Parent container's height is always set with the tallest child, except for position absolute child but then children stack and can't add margin.

I want two children should be on the same line and the height of the parent should be the height of the second child.

How to match the height of parent container and other siblings to the smallest sibling or one specific sibling (not the tallest) inside of parents?

0 Answers0