'How to make sure the content inside "row" is always the same height?

I am trying to fix a bug in this website, so I reproduce the problem in the sandbox below

https://codesandbox.io/s/confident-engelbart-q70uc8?file=/index.html

So right now the problem is when ever you change the img inside,if the size is different, the layout will extend to different height.

You can see as the image change the layout height will change as well, I tried "height" but this will ruin the responsive feature of it, is there any way to mantain the same height but still be able to be responsive?

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

  <title>Hello, world!</title>
</head>

<body>
  <section class="py-4 d-flex flex-column align-items-center bg-dark text-white min-height">
    <div class="container">
      <div class="row">
        <div class="col-md-5 d-flex justify-content-end flex-column main-heading">
          <h1 class="display-3 pb-3">Hello</h1>
          <span class="text-info lead">One two three</span>
        </div>
        <div class="col-md-7 d-md-flex justify-content-center align-items-center flex-column">
          <img src="https://i.imgur.com/l4Zvchl.jpg" class="img-fluid lazyload" alt="Page Wallpaper" />
        </div>
      </div>
    </div>
  </section>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to make sure the content inside "row" is always the same height?

Sources

Related Questions