Middle Box Centered Variable Width, Left And Right Float Directly Attached

I'm designing my own Anki-Flashcards for learning Japanese: I have three boxes of variable size in a line. The middle one should be centered and has a variable width. The boxes lef

Solution 1:

Thanks to Paulie_D and the Topic here, I came up with a solution:

HTML:

<divclass="card"><divclass="container"><spanclass="left">
   Note (e.g. uncommon): 
  </span><spanclass="middle">
   Alt JP Pronounciation
  </span><spanclass="right">
   Alt audio button
  </span></div></div>

CSS:

.right {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: left;
}

.left {
 border: 1px solid;
 flex-basis: 0%;
 flex-grow: 1;
 text-align: right;
}

.middle {
 border: 1px solid;
}

.container {
 display: flex;
}

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

Solution 2:

.right {
  float:left;
  border: 1px solid;
}
.middle {
  margin-left:3px;
  float:left;
  border: 1px solid;
}