JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">

Kanji
<hr>
Japanese Pronounciation <span class="left">audio button</span><br>
Translation
<hr>

<span class="right">
Note (e.g. uncommon): 
</span>
<span class="middle">
Alt JP Pronounciation
</span>
<span class="left">
Alt audio button
</span>


</div>

CSS

.left {
position: absolute;
}

.right {
  border: 1px solid;
}

.left {
  border: 1px solid;
}

.middle {
  border: 1px solid;
}

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
 text-align: center;
}

.jp { font-size: 30px }
.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }