CSS before in the wrong place - html

Question

I have a problem in the before of a div. I'm trying to position it at first, but it's going to the beginning of the parent div on the other side. What can I be doing wrong?
Html:
.cart-item.free-delivery-warn .left {
width: 55%;
height: 100%;
display: inline-block;
}
.cart-item.free-delivery-warn .left p {
text-align: right;
background: linear-gradient(to right, #543a5c, #452f4b);
color: #fff;
padding: 10px 0;
padding-right: 40px;
}
.cart-item.free-delivery-warn .right-content {
width: 45%;
height: 100%;
float: right;
}
.cart-item.free-delivery-warn .right-content p {
background: #bf2328;
text-align: left;
padding: 10px 0 13px 10px;
font-weight: 500;
color: #fff;
}
.right-content:before {
position: absolute;
bottom: 0;
right: 100%;
left: -12px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 12px 22px 0;
border-color: transparent #bf2328 transparent transparent;
}
<div class="cart-item free-delivery-warn">
<div class="left">
<p>Faltam apenas <span class="price-w">R$ 165,00</span> para você ganhar</p>
</div>
<div class="right-content">
<p>Frete grátis <i class="fa fa-truck price-w"></i></p>
</div>
</div>
and what it's doing wrong:

Answer 1

Whenever you use position: absolute and you want it to be relative to the container, you need to set the container to position: relative. Like this:
.cart-item.free-delivery-warn .left {
width: 55%;
height: 100%;
display: inline-block;
}
.cart-item.free-delivery-warn .left p {
text-align: right;
background: linear-gradient(to right, #543a5c,#452f4b);
color: #fff;
padding: 10px 0;
padding-right: 40px;
}
.cart-item.free-delivery-warn .right-content {
width: 45%;
height: 100%;
float: right;
}
.cart-item.free-delivery-warn .right-content p {
background: #bf2328;
text-align: left;
padding: 10px 0 13px 10px;
font-weight: 500;
color: #fff;
}
.right-content {
position: relative;
}
.right-content:before {
position: absolute;
bottom: 0;
right: 100%;
left: -12px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 12px 22px 0;
border-color: transparent #bf2328 transparent transparent;
}
<div class="cart-item free-delivery-warn">
<div class="left">
<p >Faltam apenas <span class="price-w">R$ 165,00</span> para você ganhar</p>
</div>
<div class="right-content">
<p>Frete grátis <i class="fa fa-truck price-w"></i></p>
</div>
</div>

Answer 2

You're so close, but you're just missing a position: relative on the parent.
Just be careful as margin will push it out of alignment.
Try this out:
body {
box-sizing: border-box;
}
p {
margin: 0;
}
.cart-item.free-delivery-warn .left {
width: 55%;
height: 100%;
display: inline-block;
}
.cart-item.free-delivery-warn .left p {
text-align: right;
background: linear-gradient(to right, #543a5c, #452f4b);
color: #fff;
padding: 10px 0;
padding-right: 40px;
}
.cart-item.free-delivery-warn .right-content {
width: 45%;
height: 100%;
float: right;
position: relative;
}
.cart-item.free-delivery-warn .right-content p {
background: #bf2328;
text-align: left;
padding: 10px 0 13px 10px;
font-weight: 500;
color: #fff;
}
.right-content:before {
position: absolute;
bottom: 0;
right: 100%;
left: -12px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 12px 22px 0;
border-color: transparent #bf2328 transparent transparent;
}
<div class="cart-item free-delivery-warn">
<div class="left">
<p>Faltam apenas <span class="price-w">R$ 165,00</span> para você ganhar</p>
</div>
<div class="right-content">
<p>Frete grátis <i class="fa fa-truck price-w"></i></p>
</div>
</div>