title: Is there any possibility to show element over owl carousel item?
body: <p>I have created two side by side owl carousel scroll elements. Schema:
  <a href="https://i.stack.imgur.com/Wk4Ly.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wk4Ly.png" alt="Owl carousel schema" /></a></p>
  <p>I want to achieve, that price item description is little bit over owl carousel item borders. Schema:
  <a href="https://i.stack.imgur.com/2mhCZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2mhCZ.png" alt="Owl carousel schema v2" /></a>
  Can someone please help with this situation using css or jquery.</p>
  <p>Edit:
  I crated replica. There are two owl elements. I want price:before element to be seen:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#banner_section_right .slider").owlCarousel({});
  $("#banner_section_left .slider").owlCarousel({});</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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%;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/&gt;
  &lt;div id="container"&gt;
    &lt;div id="banner_section_right"&gt;
      &lt;div class="slider"&gt;
        &lt;div class="item"&gt;
          &lt;p&gt;
          Viens
          &lt;/p&gt;
        &lt;/div&gt;
         &lt;div class="item"&gt;
          &lt;p&gt;
          Divi
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;p&gt;
          Viens
          &lt;/p&gt;
        &lt;/div&gt;
         &lt;div class="item"&gt;
          &lt;p&gt;
          Divi
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div id="banner_section_left"&gt;
      &lt;div class="slider"&gt;
        &lt;div class="item"&gt;
          &lt;p&gt;
          $1 000 000
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>