I want to create a component that includes a dot between two elements. I've tried using the span element with CSS to display a dot between the spans, but React isn't generating the dot. Using a div does display the dot, but the formatting of the two elements isn't centered properly.
//html
import "./styles.css";
export default function App() {
return (
<div className="panel-section">
<div className="panel-header">
<div className="panel-title">
{/** The div format is incorrect */}
<div>May 1st 5:31PM</div>
<div className="panel-dot"></div>
<div>Google</div>
{/** The 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;
}