I'm having trouble getting the text value to line up with the circle dot. I need the text value to scoot up towards the center of the circle dot. Currently its displaying at the bottom, just wanted to see if there is any way to scoot the text up. Below is the code that I have so far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dot {
height: 30px;
width: 30px;
background-color: #f7de39;
border-radius: 50%;
display: inline-block;
}
.dot3 {
margin-left: 20px;
height: 30px;
width: 30px;
background-color: #a39224;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div style="text-align:center">
<span class="dot"></span>
<span class="text1">$100K</span>
<span class="dot3"></span>
<span class="text2"> $500K</span>
</div>
</body>
</html>