create dot by span is not generated from react in css

  css, flexbox, html, javascript, reactjs

I would like to create one component that included the dot between 2 elements. the code I have is like following, However, I tried to use span element then create css so I can display . between 2 span. but react does not generate the dot between 2 span. I also tried to use div and then dot did display but format of 2 element does not align at center

import "./styles.css";

export default function App() {
  return (
    <div className="panel-section">
      <div className="panel-header">
        <div className="panel-title">
          {/** use div format is not correct */}
          <div>May 1st 5:31PM</div>
          <div className="panel-dot"></div>
          {/** dot is not generated
          <span>May 1st 5:31PM</span>
          <span className="panel-dot"></span>

.panel {
  width: 600px;
  height: 500px;

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 0.5%;
  right: 33.44%;

.panel-title {
  padding: 8px;
  color: #ffffff;
  background-color: #3aac6f;

.panel-dot {
  width: 4px;
  height: 4px;
  background: #3aac6f;
  align-self: center;


Source: Ask Javascript Questions