Pure-React-Carousel Flex box Alignment

Question

I am trying to have some text on the left side and my pure-react-carousel on the right side.

The carousel stretches to fill in the width of it's parent.

How do I adjust the flexbox to have 50% width without carousel without overflowing on the y axis?

Index.js

const index = () => {
  return (
    <div>
      <div className="flex">
        <div className="bg-red-200 w-1/2">Hello</div>
        <div className="bg-gray-400 w-1/2 ">
          <Carousel />
        </div>
      </div>
      <div>
        <h1>THIS IS A BLOCK ELEMENT</h1>
      </div>
    </div>
  );
};

Carousel.js(pure-react-carousel)

const Carousel = () => {
  return (
    <CarouselProvider
      naturalSlideWidth={100}
      naturalSlideHeight={125}
      totalSlides={3}
    >
      <Slider className="rounded">
        <Slide index={0}>
          <img
            src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
            alt=""
          />
        </Slide>
        <Slide index={1}>
          <img
            src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
            alt=""
          />
        </Slide>
        <Slide index={2}>
          <img
            src="https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
            alt=""
          />
        </Slide>
      </Slider>
    </CarouselProvider>
  );
};