I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem?
<div className="mt-5 mx-5 py-3 shadow bg-white">
<div className="d-flex justify-content-center">
<div style={{ float: "left", display: "flex" }}>
<div className="p-2">1</div>
</div>
<div className="p-2 me-4">Popular Products</div>
<div className="p-2">Low Price</div>
<div className="p-2 ms-4">High Price</div>
<div style={{ float: "right", display: "flex" }}>
<div className="p-2">2</div>
</div>
</div>
</div>