Add interactive vertical scale within <td> elements?

Question

I am quite new to front-end design, and am struggling to code the following design in React (using Tailwind):

I am trying to augment a table to include a vertical line and a dot placed on it next to each datum. When you hover on this vertical scale, either the bar or the circle, additional text appears alongside:

So far, I have managed to create a rough bar/circle within divs:

<td
  className={`text-center  font-base p-2`}
>
  <div className="flex justify-center align-middle items-center">
    <span>18.5</span>
    <div
      className="inline-block bg-gray-300 mx-2"
      style={{
        height: `1.5rem`,
        width: `0.125rem`,
        borderRadius: "25%",
        position: "relative",
      }}
    >
      <span
        className="bg-gray-400"
        style={{
          height: "0.4rem",
          width: "0.4rem",
          borderRadius: "50%",
          position: "absolute",
          left: "-0.15rem",
          bottom: "0.7rem",
        }}
      ></span>
    </div>
  </div>
</td>

which yields data cells like this:

However, I think this is not very efficiently coded (and am not close on the hover feature). How can I code this up better?