Как сделать так, чтобы изображение внутри столбца сжималось, чтобы соответствовать разной высоте содержимого в следующем столбце?

Question

У меня есть два столбца начальной загрузки внутри строки , один из которых гибкий контейнер с направлением столбца и содержит некоторые элементы, такие как h2, p, кнопка и второй столбецсодержащее изображение, изображение на странице имеет большую высоту, чем содержимое в другом столбце:

<Row>
  <Col className="col1 d-flex flex-column">
   <h2>some heading</h2>
   <p>some paragraph</p>
   <Button>some button</Button
  <Col>
  <Col className="col2">
    <img src="some src"/>
  </Col>
</Row>

Теперь мне нужно, чтобы это изображение в .col2 выглядело так жевысота до содержимого в. col1 , я не хочу использовать justify-content-Между в col1 это решит это, но это разрушит дизайн,Единственный способ, который, я уверен, сработает, - это уменьшить col2 с изображением, но я не знаю лучшего способа добиться этого без задания фиксированной высоты изображения *