JSFiddle - React, Tailwind, and code Playground

by Ayan Dey

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div style="position:relative;">
          <div class="row" id='blue_box'
            style="overflow:scroll; overflow-y:hidden;
            width:100%; border:10px dotted blue;">
            <div id = 'red_box' class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
              style="display:flex;justify-content:space-around;
              width:90vw; max-width:1296px; height:32vw; margin:10px;
              border: 1px solid red;">
              <div class="element" style="width:80vw;
                height:32vw;
                border:10px solid transparent;
                max-height:467px;">
              content 1
              </div>
              <div class="element" style="width:180vw;
                height:32vw;
                border:10px solid transparent;
                max-height:467px;">
              content 2
              </div>
              <div class="element" style="width:80vw;
                height:32vw;
                border:10px solid transparent;
                max-height:467px;">
              content 2
              </div>
              <div class="element" style="width:80vw;
                height:32vw;
                border:10px solid transparent;
                max-height:467px;">
              content 2
              </div>
            </div>
          </div>
        </div>
        
        <div id="left" class="btn">
         Left
        </div>
         <div id="right" class="btn">
         Right
        </div>

CSS

.element {
  border-right: 1px solid green !important;
}
.btn {
  background-color: gold;
  width:100px;
  margin-bottom: 10px;
}