How do I align 3 spans but push one a bit lower

I have a <span> that is a container to 3 child spans. I would like to lower the middle span (the circle) 1px or 2px. Or alternatively, raise the left and right span 1 or 2px.

However, changing one thing affects the other. How can I lower the circle or raise up the text?

.time {
  display: inline-block; 
  width: 130px; 
  height: 100%;
}

.circle {
  display: inline-block; 
  height: 14px;
  width: 14px;
  background-color: #006600;
  border-radius: 50%;
  margin-left: 26px;
  margin-top: 7px;
  margin-right: 20px;
}

.case {
  display: inline-block; 
  height: 100%;
}
<span>
  <span class="time">9:00 AM - 1:00 PM</span>
  <span class="circle"></span>
  <span style="">9am-1pm ZM: Frank Rizzo vs. Holiday Star Inn, LLC, et al.</span>
</span>



Read more here: https://stackoverflow.com/questions/68464127/how-do-i-align-3-spans-but-push-one-a-bit-lower

Content Attribution

This content was originally published by AngryHacker at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: