How to Get the Position of Text Within an Element

How to get the position of text within an element?

If you know the string position of the character in the text, you can wrap the character in a <span> or similar element with an ID and find the x,y coords of that element. Easiest way to do this is with jQuery or another library, see this answer for a cross-browser, no-library method.

Text position inside <a> element

There are two ways you can do this, however without javascript both of these methods require absolute heights although the second option works relative to the padding you have set.

The first, an obvious choice is the use of line height.
This works by setting the height of the line of text to a value, and because text is already natively vertically aligned to the center of the line-height you get the effect you are looking for.
adding the line line-height : 27px; to .button { will give you your desired result.
jsfiddle

The second way is to wrap the text inside the element in a span tag and set the bottom property to bottom: -6.75px;
Your button element would look like this
<a class="button" href="#"><span id="buttontext">Read More</span></a>
and you would add this line to your css:
#buttontext {position: relative; bottom: -6.75px;}
jsfiddle

REFERENCES

line-height
bottom

Position of text within the block element

Change a structure of your HTML a little bit and change your <a> to flexbox i.e. from display: block to display: flex.

Have a look at the snippet below:

.lst {  font-family: montserrat;  width: 300px;  list-style-type: none;  position: relative;}
ul.lst li {  position: relative;}
ul.lst li a {  text-decoration: none;  color: #252525;  display: flex;  padding: 5px;  position: relative;  border-bottom: 2px solid #f3f2e8;  z-index: 2;}
ul.lst li a .text {  flex: 1;}
ul.lst li em {  font-style: normal;  float: right;  width: 25%;  color: orange;}
ul.lst li span {  position: absolute;  top: 0;  left: 0;  display: block;  height: 100%;  text-indent: -9999px;  background: #BFD3EE;  opacity: 0.5;}
ul.lst li:hover span {  background: #658BBB;}
ul.lst li:hover a{  color: #61304B;}
ul.lst li:hover em{  color: #61304B;}

<ul class="lst">  <li>    <a href="#">      <div class="text">Americano</div>      <em>$2.24</em>    </a>    <span style="width:20%">20%</span>  </li>  <li>    <a href="#">      <div class="text">Green tea with a tiny piece of lemon</div>      <em>$22.50</em>    </a>    <span style="width: 50%">50%</span></li>  <li>    <a href="#">      <div class="text">Black Tea</div>      <em>$2</em>    </a>    <span style="width: 75%">75%</span>  </li>  <li>    <a href="#">      <div class="text">Black coffee</div>      <em>$2</em>    </a>    <span style="width: 90%">90%</span>  </li>  <li>    <a href="#">      <div class="text">Latte</div>      <em>$2</em>    </a>    <span style="width: 50%">100%</span>  </li></ul>

Positioning text inside div

You will need to position it absolutely by adding the following styles:

.popup_body {
  position:relative;
}

And then give the h6 position:absolute; top: 0; and right:0; This will ensure it is always in the top right corner.

Here is a link to the updated fiddle with my code suggestions.

How to Get the Position of Text Within an Element