css - Is there any possibility to show element over owl carousel item?

Question

I have created two side by side owl carousel scroll elements. Schema:

I want to achieve, that price item description is little bit over owl carousel item borders. Schema: Can someone please help with this situation using css or jquery.

Edit: I crated replica. There are two owl elements. I want price:before element to be seen:

$("#banner_section_right .slider").owlCarousel({});
$("#banner_section_left .slider").owlCarousel({});

#container {
  width: 100%;
  height: 200px;
  background: blue;
  position: relative;
  float: left;
}
#banner_section_right {
  width: 70%;
  background: red;
  float: left;
}
#banner_section_left {
  width: 30%;
  background: green;
  float: left;
}
#banner_section_left .item {
  width: 100%;
  background: yellow;
}
#banner_section_left .item:before {
    width: 1em;
    background: yellow;
    top: 0;
    content: "";
    position: absolute;
    right: 100%;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div id="container">
  <div id="banner_section_right">
    <div class="slider">
      <div class="item">
        <p>
        Viens
        </p>
      </div>
       <div class="item">
        <p>
        Divi
        </p>
      </div>
      <div class="item">
        <p>
        Viens
        </p>
      </div>
       <div class="item">
        <p>
        Divi
        </p>
      </div>
    </div>
  </div>  
  <div id="banner_section_left">
    <div class="slider">
      <div class="item">
        <p>
        $1 000 000
        </p>
      </div>
    </div>
  </div>  
</div>

Answer 1

I have example your can learn from this might help you what you want to achieve.

html:

<div id="container">

  <div class="green"></div>
  <div class="red"></div>
  <div class="box"></div>

</div>

CSS:

#container{
  width: 100%;
  height: 200px;
  background: blue;
  position: relative;
}
div.green{
  background: green;
  display: block;
  height: 100px;    
}
div.red{
  background: red;
  display: inlinblock;
  height: 100px;
}
div.box{
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

have a look at this css property transform: translateY(-50%); this can move object over other.

Working example : http://fiddlesalad.com/css/div-over-other-div