How to make two divs take the height of the bigger div

Question

So my design includes two columns inside one row beside each other; one for a paragraph and the other for an image; the paragraph is usually bigger in height than the image. so how should I resize the image as the paragraph with also giving it a min height. (Ps. I'm using reactjs along side with react Bootstrap)

My code:

 <Row className={[stylesParagraph.pardiv, stylesParagraph.bodyWidth]}>
       
        <Col className={stylesParagraph.baseCol} xs={12} sm={12} md={12} lg={{span:12  , order:props.order}} xl={6} >
          <div className={stylesParagraph.par}>
           {/*  <h2 className={ stylesParagraph.title}>{props.title}</h2> */}
           <p className={stylesParagraph.paragraph}>{props.text}</p> 
          </div>
        </Col>
        <Col className={stylesParagraph.imgCol} xs={12} sm={12} md={12} lg={12} xl={6}>
          <img
            className={stylesParagraph.img}
            src={props.img}
            alt=""
          />
        </Col>
      </Row>

Answer 1

If you want to use img then you can try

<div className="container">
    <div className="segment">
        <img src="./image.jpg" alt="image.jpg" />
    </div> 

    <div className="segment">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea sint 
        totam quo nisi quaerat accusamus nemo modi ratione iste aut 
        delectus reprehenderit minima vero consequuntur nam officiis 
        voluptatum, doloremque voluptates.
    </div>
</div>

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.segment {
    width: 100%;
    height: 60%;
}

img {
    width: 100%;
    height: 100%;
    min-height: 50%;
    object-fit: cover /* or use contain */;
}