You should have sent a screenshot showing what appears in your anki or what error message appears to you. This way, it would be easier to help you.
Observation:
If the design is being rendered in an acceptable way and close to what you want on the “codepen” screen as it appeared to me, the problem is not broken HTML and CSS code.
I already took your code and tested it on my Anki and it is working. However, there are 2 problems, 1 problem that you must be facing and another that I have already found:
1 - Problem you must be facing:
This within your code > {{Target Word}}, {{Sentence}}, {{Audio}}, {{Pronunciation}}, {{Translation}} are anki fields. You must fill them in in “Add Card”. For your code to work, you need to modify the card’s field structure. These fields must exist prior to the code.
Your fields need to look like this…
To do this, you must edit them here…

There are 2 ways to edit card fields:
1. Add Card > Fields (top right) - Use this method if you have already created a different type of note than Anki’s native notes (I recommend duplicating as you may need the native notes one day). Otherwise, use the method below.
2. Tools > Manage Note Types > Add > Basic Duplicate > Rename to a name you want > Select this new note you created > Fields > Edit them…
2- Problem I found:
The code you provided does not have a “back”, only the “front” of the card. So when I click “show answer” when reviewing the card, it only shows “shipping”, going completely against the fundamentals of a flashcard, which is to have a back. For me to help you in this aspect, you need to tell me which of these fields you want on the front of the card and which fields you want on the back of the card.