JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_wrap">






  <div class="main_wrap_2">

    <div class="left_wrap">


      <div class="carousel_wrap">

        <div id="carousel1" class="owl-carousel">

          <div>
            <video id="" class="video-js vjs-default-skin" width="100%" height="auto">
              <source src="https://player.vimeo.com/video/134892252?color=ffffff&title=0&byline=0&portrait=0" type="video/mp4" />
            </video>
          </div>


          <div>
            <video id="example_video_3" class="video-js vjs-default-skin" controls preload="auto" width="100%" height="auto" poster="https://i.vimeocdn.com/video/528578639_640.jpg" data-description="">
              <source src="https://player.vimeo.com/video/134888075?color=ffffff&title=0&byline=0&portrait=0" type="video/mp4" />

              <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
              </p>
            </video>
          </div>




          <div class="item"><img src="Kami_1.jpg"></div>



          <div class="item-video" data-merge="2">
            <a class="owl-video" href="https://player.vimeo.com/video/134892252?color=ffffff&title=0&byline=0&portrait=0"></a>
          </div>

          <div class="item"><img src="Kami_2.jpg"></div>
          <div class="item"><img src="Kami_3.jpg"></div>
          <div class="item"><img src="Kami-Gif.gif"></div>
          <div class="item"><img src="Kami-Gif-2.gif"></div>

        </div>



      </div>

    </div>




    <div class="right_wrap">




      <div class="content_wrap">

        <p class="content"> Bike share programs around the world are gaining popularity fast with more and more cities around the world implementing them. However, despite the increase use of bike share programs, a common trend exists. Bike share users don’t use bicycle
          helmets. While in Japan, a fellow...

CSS

.main_wrap {
  width: 100%;
}

.main_wrap_2 {
  position: relative;
  margin: 0 auto;
}

.left_wrap {
  background-color: #fff;
  width: 50%;
  max-width: 930px;
  position: relative;
  float: left;
}

.right_wrap {
  background-color: #fff;
  width: 50%;
  max-width: 930px;
  margin-top: 80vh;
  position: relative;
  float: left;
}

.carousel_wrap {
  width: 92%;
  margin-top: 80vh;
}

.content_wrap {
  margin-top: 0px;
  padding: 0;
  position: relative;
  clear: both;
}

.content {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica LT Std';
  font-size: 12px;
  line-height: 1.5;
  width: 280px;
}