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

//html
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>
          <div>Google</div>
          {/** dot is not generated
          <span>May 1st 5:31PM</span>
          <span className="panel-dot"></span>
          <span>Google</span>
          */}
        </div>
      </div>
    </div>
  );
}


//css
.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;
}

codepen:

Source: Ask Javascript Questions

LEAVE A COMMENT