Use React fragments to avoid wrapping elements

[hanydd]

• [x] I agree to license my contribution under GPL-3.0 and agree to allow distribution on app stores as outlined in LICENSE-APPSTORE

---

Currently, the component renders another <span> and put all the conditional elements inside, which makes the same-level elements reside in separate wrapping spans. Using React fragments (<></>) as a wrapping placeholder can solve this. And it allowed for better layout controls, such as using flow or grid.