Positioning a absolute div at the edges of an inline span - html

Question

I am building functionality to select text with "handles". These handles need to be positioned on either the left or right side of the inline span. An image:
As you can see I've come a long way in styling this in CSS. The one problem I have is that I can't seem to position the right handle on the text itself.
The following code is being used:
.text {
display: inline;
background-color: #4d82f2;
color: white;
padding: 1px;
border-radius: 2px;
margin: 0;
position: relative;
}
.text>.handle-left {
position: absolute;
background-color: #757575;
height: 25px;
width: 30px;
left: -30px;
top: -25px;
font-size: 10px;
border-radius: 15px;
border-bottom-right-radius: 4px;
}
.text>.handle-right {
position: absolute;
background-color: #757575;
height: 25px;
width: 30px;
right: -30px;
top: -25px;
font-size: 10px;
border-radius: 15px;
border-bottom-left-radius: 4px;
}
<div>All the other text
<div class="text">
<span>blue text</span>
<div class="handle-left">plus icon</div>
<div class="handle-right">plus icon</div>
</div>
Maybe some more text, who knows?
</div>
This JSFiddle displays my problem well:
JSFiddle

Answer 1

I would probably transform the element to inline and make one at the beginning and the other one at the end then I will use pseudo element. Doing this I will be sure they will be in the right place:
.all-text {
width: 400px;
margin: 40px;
}
.text {
display: inline;
background-color: #4d82f2;
color: white;
padding: 1px;
border-radius: 2px;
margin: 0;
position: relative;
}
.text>.handle-left,
.text>.handle-right {
position: relative;
}
.text>.handle-left:before {
content: "+";
position: absolute;
background-color: #757575;
height: 25px;
width: 30px;
left: -30px;
top: -25px;
display: inline-flex;
justify-content: center;
font-size: 24px;
border-radius: 15px;
border-bottom-right-radius: 4px;
}
.text>.handle-right:before {
content: "+";
position: absolute;
background-color: #757575;
height: 25px;
width: 30px;
right: -30px;
bottom: 18px;
display: inline-flex;
justify-content: center;
font-size: 24px;
border-radius: 15px;
border-bottom-left-radius: 4px;
}
<div class="all-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum corporis enim doloremque perspiciatis, doloribus nemo commodi, consectetur
<div class="text">
<span class="handle-left"></span>
<span> quaerat verit</span>
<span class="handle-right"></span>
</div>
autem laboriosam est alias aspernatur deserunt quae, fugit eos? Lorem ipsum dolor sit amet,
<div class="text">
<span class="handle-left"></span>
<span> quaerat verit consectetur adipisicing elit. Laborum corporis enim </span>
<span class="handle-right"></span>
</div>
consectetur adipisicing elit. Laborum corporis enim doloremque perspiciatis, doloribus nemo commodi, consectetur
<div class="text">
<span class="handle-left"></span>
<span> quaerat veritatis at unde</span>
<span class="handle-right"></span>
</div>
autem laboriosam est alias aspernatur deserunt quae, fugit eos?</div>