Some parts of the back shows on the front

Thank you for making this. It works very well. I just found a little bug that I would like to report here.

• Browser: Chrome Version 65.0.3325.162 (Official Build) (64-bit)
• OS: macOS High Sierra Version 10.13.3

When the screen size goes lower than a specific size, some elements from the back of the card show up on the front! (mirrored). I have put them in red boxes below.

Any clue what’s happening here?

Screen width <= 768px

Front

Back

---

Screen width > 768px

Front

back

[rhazegh]

The fix was rather simple 😄

.react-card-back {
    z-index: -1;
}

[rhazegh]

@AaronCCWong Also added the content to the front and back. We only need to figure how to import react-card-flip on JSFiddle. Any idea?

https://jsfiddle.net/zs3uh9wo/33/