How to make css-style and html for Anki-card (front and back side)?

Question

css

Hello.
I am creating cards for learning English phonetics in Anki and would like to improve the appearance of the cards (front and back).
Here I sketched the design by hand ( https://goo.gl/eAKJeS), but I don’t know how to translate it into html and css.
I will be grateful for help.

Answer 1

flip effect is called .... is it ?
https://davidwalsh.name/demo/css-flip.php

Answer 2

I found on the Internet an example of the arrangement of blocks horizontally, adapted it to my task and this is what happened:
Here is the html code:

{{Describe of sound}}<br><br>
<div id="wrapper">
    <div class="section">{{Letter(s) - 1}}<br>
{{Symbol - 1}}</div>
    <div class="section">{{Word - 1}}<br>
{{Word_transcription - 1}}</div>
    <div class="section">{{Audio letter(s) - 1}}   {{Audio word - 1}}</div>
</div>
<br>
<div id="wrapper">
    <div class="section">{{Letter(s) - 2}}<br>
{{Symbol - 2}}</div>
    <div class="section">{{Word - 2}}<br>
{{Word_transcription - 2}}</div>
    <div class="section">{{Audio letter(s) - 2}}   {{Audio word - 2}}</div>
</div>
<br>
<div id="wrapper">
    <div class="section">{{Letter(s) - 3}}<br>
{{Symbol - 3}}</div>
    <div class="section">{{Word - 3}}<br>
{{Word_transcription - 3}}</div>
    <div class="section">{{Audio letter(s) - 3}}   {{Audio word - 3}}</div>
</div>

Here is the css code^

#wrapper {
    width:320px;
    height:60px;
   /* background:#EFEFEF;*/
}
.section {
    border:solid 1px #999;
    float:left;
    height:58px;
    margin-left:10px;
    width:98px;
}
#wrapper div:first-child {
margin-left:0px;
}

It would be necessary to align the blocks horizontally, I don’t know how ...