I am trying to get two columns or grids in Bootstrap 4 carousel

Question

So I have a non working slider example, but I need to make two responsive equal columns reside in the slide caption div in the slider. The idea is to have a released book for sale in one column (left side) and text explaining the book next to it (right side). I have tried adding another container and row around one caption, but to no avail. Something with the css property flex-flow: column; keeps messing up the entire carousel on other slides. Anyhow, help would be appreciated.

Codepen

HTML

<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-60 min-vh-md-100 include-header"
        data-autoplay="7000" data-speed="650" data-loop="true">
        <div class="slider-inner">
    
            <div class="swiper-container swiper-parent">
                <div class="swiper-wrapper">
                    <div class="swiper-slide dark">
                        <div class="container">
                            <div class="slider-caption slider-caption-center">
                                <h2 data-animate="fadeInUp">Welcome to Canvas</h2>
                                <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Create just what you
                                    need for your Perfect Website. Choose from a wide range of Elements &amp; simply put
                                    them on our Canvas.</p>
                            </div>
                        </div>
                        <div class="swiper-slide-bg" style="background-image: url('images/slider/swiper/1.jpg');"></div>
                    </div>
                    <div class="swiper-slide dark">
                        <div class="container">
                            <div class="slider-caption slider-caption-center">
                                <h2 data-animate="fadeInUp">Beautifully Flexible</h2>
                                <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Looks beautiful &amp;
                                    ultra-sharp on Retina Screen Displays. Powerful Layout with Responsive functionality
                                    that can be adapted to any screen size.</p>
                            </div>
                        </div>
                        <div class="video-wrap">
                            <video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay
                                muted>
                                <source src='images/videos/explore.webm' type='video/webm' />
                                <source src='images/videos/explore.mp4' type='video/mp4' />
                            </video>
                            <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="container">
                            <div class="slider-caption">
                                <h2 data-animate="fadeInUp">Great Performance</h2>
                                <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">You'll be surprised to
                                    see the Final Results of your Creation &amp; would crave for more.</p>
                            </div>
                        </div>
                        <div class="swiper-slide-bg"
                            style="background-image: url('images/slider/swiper/3.jpg'); background-position: center top;">
                        </div>
                    </div>
                </div>
                <div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
                <div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
                <div class="slide-number">
                    <div class="slide-number-current"></div><span>/</span>
                    <div class="slide-number-total"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
    
        </div>
    </section>

CSS

.slider-caption {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  flex-flow: column;
  justify-content: center;
  z-index: 20;
  max-width: 550px;
  color: #eee;
  font-size: 1.375rem;
  font-weight: 300;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: top 0.3s ease;
  -o-transition: top 0.3s ease;
  transition: top 0.3s ease;
  background: purple;
}

Answer 1

This should work, you will probably have to add additional CSS for the image to look good.

Replace this code:

<div class="slider-caption slider-caption-center">
                                    <h2 data-animate="fadeInUp">Welcome to Canvas</h2>
                                    <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Create just what you
                                        need for your Perfect Website. Choose from a wide range of Elements &amp; simply put
                                        them on our Canvas.</p>
                                </div>

With this code:

<div class="row d-inline-flex">
                       <div class="col-6">
                          <img src="http://via.placeholder.com/400x600">
                       </div>
                       <div class="col-6">
                          <div class="slider-caption slider-caption-center">
                             <h2 data-animate="fadeInUp">Name Of The Book</h2>
                             <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Very cool description about the book.</p>

                          </div>
                       </div>
                    </div>

Additional CSS:

.d-inline-flex {
   display: inline-flex;
}